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`, `<script />` 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就会访问到,去掉之后重启服务器。
#前端#公zhong号:深漂程序员小庄,专注于分享编码经验、技术干货、面试经验、偶尔分享深漂日常、工作书籍、实用书籍等。