webpack和webpack-dev-server区别解析
大家好，我是小庄，一个专心于互联网技术的深漂打工人。
我们都知道，webpack和webpack-dev-server这两者自身是有区别的，以及在这两者中使用output.publicPath，效果也是不同的，如何不同呢？
今天，小庄就来总结一下webpack和webpack-dev-server的区别，以及实践解析一下，在webpack和webpack-dev-server中使用output.publicPath的区别。
一、两者区别
webpack和webpack-dev-server的区别如下：
1、区别1 —— 自身功能不同。
- webpack：仅用于构建项目。
具体功能：一个模块打包器，根据entry指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项随即被处理，最后输出到output字段指定的文件中。
- webpack-dev-server：一个服务器插件，相当于webpack+apache（或者其它web服务器）
具体功能：使用webpack-dev-server相当于启动了一个web服务，且webpack-dev-server具有实时更新修改的功能。并且启动webpack-dev-server后，在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中。
2、 区别2 —— 使用output.publicPath的效果不同。该区别详见以下webpack官方文档解析+ 实践解析。
二、文档解析
output.publicPath
Type:
- function
- string
targets 设置为 web 与 web-worker 时 output.publicPath 默认为 ‘auto’，查看该指南获取其用例
对于按需加载(on-demand-load)或加载外部资源(external resources)（如图片、文件等）来说，output.publicPath 是很重要的选项。如果指定了一个错误的值，则在加载这些资源时会收到 404 错误。
此选项指定在浏览器中所引用的「此输出目录对应的公开 URL」。相对 URL(relative URL) 会被相对于 HTML 页面（或 标签）解析。相对于服务的 URL(Server-relative URL)，相对于协议的 URL(protocol-relative URL) 或绝对 URL(absolute URL) 也可是可能用到的，或者有时必须用到，例如：当将资源托管到 CDN 时。
该选项的值是以 runtime(运行时) 或 loader(载入时) 所创建的每个 URL 为前缀。因此，在多数情况下，此选项的值都会以 / 结束。
规则如下：output.path 中的 URL 以 HTML 页面为基准。
webpack.config.js
const path = require('path');module.exports = {
//...
output: {
path: path.resolve(__dirname, 'public/assets'),
publicPath: 'https://cdn.example.com/assets/',
},};
对于这个配置：
webpack.config.js
module.exports = {
//...
output: {
publicPath: '/assets/',
chunkFilename: '[id].chunk.js',
},};
对于一个 chunk 请求，看起来像这样 /assets/4.chunk.js。
对于一个输出 HTML 的 loader 可能会像这样输出：
或者在加载 CSS 的一个图片时：background-image: url(/assets/spinner.gif);
webpack-dev-server 也会默认从 publicPath 为基准，使用它来决定在哪个目录下启用服务，来访问 webpack 输出的文件。
注意，参数中的 [fullhash] 将会被替换为编译过程(compilation) 的 hash。详细信息请查看指南 - 缓存。
示例：
module.exports = {
//...
output: {
// One of the below
publicPath: 'auto', // It automatically determines the public path from either `import.meta.url`, `document.currentScript`, `` or `self.location`.
publicPath: 'https://cdn.example.com/assets/', // CDN（总是 HTTPS 协议）
publicPath: '//cdn.example.com/assets/', // CDN（协议相同）
publicPath: '/assets/', // 相对于服务(server-relative)
publicPath: 'assets/', // 相对于 HTML 页面
publicPath: '../assets/', // 相对于 HTML 页面
publicPath: '', // 相对于 HTML 页面（目录相同）
},};
在编译时(compile time)无法知道输出文件的 publicPath 的情况下，可以留空，然后在入口文件(entry file)处使用自由变量(free variable) webpack_public_path，以便在运行时(runtime)进行动态设置。
__webpack_public_path__ = myRuntimePublicPath;// 应用程序入口的其他部分
有关 webpack_public_path 的更多信息，请查看此讨论。
三、实践解析
1、注意：
首先，关于webpack极速配置技巧，详见上一节「前端工程化&掌握webpack极速配置技巧」，本节将沿用上一节已经配置好的项目。
2、实践部分：
（1）当配置了output.publicPath时，使用webpack打包项目的效果：
- 如下为webpack.config.js的全部配置，重点看output的配置；
/*
以下为webpack的极速配置示例
*/
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// mode分为development 和 production
mode: 'development',
entry: {
index: path.resolve(__dirname, './src/js/index.js'),
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/test',
// 注意：[name]是一个变量, [name].js将对应entry中的index.js
filename: 'js/[name].js',
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: path.resolve(__dirname, './node_modules')
},
{
test: /\.css$/,
// 注意：webpack中的使用loader时，是倒序处理的，所以use中同样需要倒序放置
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
},
{
test: /\.tpl$/,
loader: 'ejs-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
// 1、打包后的文件名称
filename: 'index.html',
// 2、要打包的html模版, 即index.html
template: path.resolve(__dirname, './src/index.html'),
/*
3、要在打包后的index.html中引入的js文件,
其中, 数组chunks中存放的是entry对象的key,
而这里是key值是index。
*/
chunks: ['index'],
/*
4、要在打包后的index.html中排除引入的js文件,
其中, 数组excludeChunks中存放的是entry对象的key,
而这里是key值是node_modules, 如果entry中的key值没
有node_modules也没关系，写上也不会报错。
*/
excludeChunks: ['node_modules']
})
],
devServer: {
open: true,
host: 'localhost',
port: 3300
}
};
- 在package.json中，如下红框为webpack打包项目的命令配置；
- 在终端使用npm run webpack，查看效果；
npm run webpack
- 对比没有使用output.publicPath，查看效果；
- 总结；
用户使用webpack打包项目，并且指定了output.publicPath时，webpack
会在静态⽂件路径(webpack本身是专门用来处理js文件的，所以这里的静态文件
路径，一般可以理解为js文件路径)前⾯添加publicPath的值。以此类推，当我
们计划把静态资源放到CDN上的时候，把publicPath的值设为CDN的值就可以了。
（2）当配置了output.publicPath时，使用webpack-dev-server打包项目的效果：
- webpack.config.js的全部配置同上；
- 在package.json中，如下红框中，为webpack-dev-server打包项目的命令配置；
- 在终端使用npm run dev，查看效果；
npm run dev
- 对比没有使用output.publicPath，查看效果；
- 总结；
用户使用webpack-dev-server打包项目，并且指定了output.publicPath时：
除了会出现webpack打包项目同样的效果外，webpack-dev-server还会把index.html打包到publicPath指定的⽬录。所以我们需要使用localhost:3300/test才能访问得到资源。
也就是官网所说，webpack-dev-server 会默认从 publicPath 为基准，使 用它来决定在哪个目录下启用服务，来访问
webpack 输出的文件。
但是这样访问有点不太⽅便了，最简单的办法，就是把publicPath配置去掉，这样webpack-dev-server就会把⽂件打包到根⽬录下，localhost:3300就会访问到，去掉之后重启服务器。
四、补充部分
关注公众号：【深漂程序员小庄】：
内含丰富的学习资源和面试经验（不限前端、java、算法），还有学习交流群可加，并且还有各大厂大佬可一起交流学习，一起进步～添加小庄微信，回复【加群】，可加入互联网技术交流群：
