webpack 小记
1.HtmlWebpackPlugin
我们可以看到,webpack 生成 print.bundle.js
和 app.bundle.js
文件,这也和我们在 index.html
文件中指定的文件名称相对应。如果你在浏览器中打开 index.html
,就可以看到在点击按钮时会发生什么。
但是,如果我们更改了我们的一个入口起点的名称,甚至添加了一个新的名称,会发生什么?生成的包将被重命名在一个构建中,但是我们的index.html
文件仍然会引用旧的名字。我们用 HtmlWebpackPlugin
来解决这个问题。
在我们构建之前,你应该了解,虽然在 dist/
文件夹我们已经有 index.html
这个文件,然而 HtmlWebpackPlugin
还是会默认生成 index.html
文件。这就是说,它会用新生成的 index.html
文件,把我们的原来的替换。
2.clean-webpack-plugin
清理 /dist
文件夹
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); + const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { entry: { app: './src/index.js', print: './src/print.js' }, plugins: [ + new CleanWebpackPlugin(), new HtmlWebpackPlugin({ title: 'Output Management' }) ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } };
3.定位错误在哪个文件:devtool: 'inline-source-map',
为了更容易地追踪错误和警告,JavaScript 提供了 source map 功能,将编译后的代码映射回原始源代码。如果一个错误来自于 b.js
,source map 就会明确的告诉你。
source map 有很多不同的选项可用,请务必仔细阅读它们,以便可以根据需要进行配置。
对于本指南,我们使用 inline-source-map
选项,这有助于解释说明我们的目的(仅解释说明,不要用于生产环境):
4.自动编译
每次要编译代码时,手动运行 npm run build
就会变得很麻烦。
webpack 中有几个不同的选项,可以帮助你在代码发生变化后自动编译代码:
- webpack's Watch Mode
- webpack-dev-server
- webpack-dev-middleware
多数场景中,你可能需要使用 webpack-dev-server
,但是不妨探讨一下以上的所有选项。
5.不用刷新浏览器
使用 webpack-dev-server
webpack-dev-server
为你提供了一个简单的 web 服务器,并且能够实时重新加载(live reloading)。让我们设置以下:
npm install --save-dev webpack-dev-server
修改配置文件,告诉开发服务器(dev server),在哪里查找文件:
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = { entry: { app: './src/index.js', print: './src/print.js' }, devtool: 'inline-source-map', + devServer: { + contentBase: './dist' + }, plugins: [ new CleanWebpackPlugin(['dist']), new HtmlWebpackPlugin({ title: 'Development' }) ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } };
6.HMR 修改样式表
借助于 style-loader
的帮助,CSS 的模块热替换实际上是相当简单的。当更新 CSS 依赖模块时,此 loader 在后台使用 module.hot.accept
来修补(patch) <style>
标签。
所以,可以使用以下命令安装两个 loader :
npm install --save-dev style-loader css-loader
接下来我们来更新 webpack 的配置,让这两个 loader 生效。
7.为了学会使用 tree shaking,你必须……
- 使用 ES2015 模块语法(即
import
和export
)。 - 在项目
package.json
文件中,添加一个 "sideEffects" 入口。 - 引入一个能够删除未引用代码(dead code)的压缩工具(minifier)(例如
UglifyJSPlugin
)。 -
注意,虽然
UglifyJSPlugin
是代码压缩方面比较好的选择,但是还有一些其他可选择项。以下有几个同样很受欢迎的插件:如果决定尝试以上这些,只要确保新插件也会按照 tree shake 指南中所陈述的,具有删除未引用代码(dead code)的能力足矣。
8.css-loader 和style-loader
这一小节我们先使用 css-loader 和 style-loader 库。前者可以让 CSS 文件也支持 impost,并且会解析 CSS 文件,后者可以将解析出来的 CSS 通过标签的形式插入到 HTML 中,所以后面依赖前者。
9.extract-text-webpack-plugin插件将 CSS 文件打包为一个单独文件
但是将 CSS 代码整合进 JS 文件也是有弊端的,大量的 CSS 代码会造成 JS 文件的大小变大,操作 DOM 也会造成性能上的问题,所以接下来我们将使用 extract-text-webpack-plugin插件将 CSS 文件打包为一个单独文件
首先安装 npm i --save-dev extract-text-webpack-plugin
10.webpack设置服务器代理详解
var proxyTable = {
'/api': {
// 目标服务器 host
target: 'http://10.16.85.138:8080',
// 默认false,是否需要改变原始主机头为目标URL
changeOrigin: true,
pathRewrite: {
// 重写请求,比如我们源访问的包含/api,那么请求会将/api替换为/yh/ihr/api
'/api': '/yh/ihr/api',
// 重写请求,比如我们源访问的是api/old-path,那么请求会被解析为/api/new-path
'^/api/old-path' : '/api/new-path',
// 同上
'^/api/remove/path' : '/path'
},
router: {
// 如果请求接口 == '/api/'
// 则重写目标服务器 'http://10.16.85.138:8080' 为 'http://localhost:8000'
'/api/' : 'http://localhost:8000'
},
// proxy事件: 监听请求返回事件
onProxyRes : proxy.on('proxyRes', function (proxyRes, req, res) {
console.log('target', JSON.stringify(proxyRes.headers, true, 2))
});
}
}