html 文件如何也同步到 dist 目录? bundle.js 文件修改了, 万一被浏览器缓存了怎么办? 如何为导出的文件加 md5? 如何把 js 引用自动添加到 html? 非业务代码和业务代码如何分开打包? 如何搭建开发环境? 如何实现开发环境的热更新?
在上一节我们已经搭建了一个最基本的 webpack 环境, 这一节我们带着上节的一些疑问, 继续优化我们的 react 工程
1. 整合 html-webpack-plugin
public 的 index.html 应该自动编译到 dist 目录, 并且所有的 js 引用是自动添加的你可以使用 html-webpack-plugin 插件来处理这个优化
(1) 安装 html-webpack-plugin:
npm install --save-dev html-webpack-plugin
(2) 在 webpack.prod.conf.js 中配置 plugins 属性
- const merge = require('webpack-merge');
- const baseWebpackConfig = require('./webpack.base.conf.js');
- const HtmlWebpackPlugin = require('html-webpack-plugin');
- module.exports = merge(baseWebpackConfig, {
- mode: 'production',
- plugins: [
- new HtmlWebpackPlugin({
- template: 'public/index.html',
- inject: 'body',
- minify: {
- removeComments: true,
- collapseWhitespace: true,
- removeAttributeQuotes: true
- },
- })
- ]
- });
(3) 删除 index.html 中手动引入的 script 标签
index.html 的代码应该是这样的:
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 从零开始搭建 react 工程 </title>
- </head>
- <body>
- <div id="root"></div>
- </body>
- </html>
(4) 重新执行编译
npm run build
查看 dist 文件夹, index.html 也被加载进来了, 并且已经自动加上了 script 标签
2. 为导出的 js 文件添加内容 hash
当我们的业务有修改, bundle 被重新打包, 很可能在客户的电脑上并没有奏效, 你告诉客户, 应该是被缓存了, 需要刷新浏览器, 清理下浏览器缓存这也许能解决问题, 但是太糟糕了, 我们有更好的方式, 让导出的 js 文件加上文件 hash, 从而每次修改, 转译出的 js 文件名称都不相同, 那么 js 文件当然不会被缓存了
添加文件 hash 的方法很简单, 只要修改 output.filename 属性即可, 这里我们做一个小小的优化, 把导出的文件存放在 js 目录下, 并且直接使用 name+chunkhash 的方式来命名
filename: "js/[name].[chunkhash:16].js"
其中, name 就是模块名称, 我们在 entry 中进行过配置, chunkhash 是文件内容的 hash,webpack 默认采用 md5 的方式对文件进行 hash16 是 hash 的长度, 如果不设置, webpack 会设置默认值为 20
现在, 你的 webpack.prod.conf.js 文件看起来应该是这样:
- const merge = require('webpack-merge');
- const baseWebpackConfig = require('./webpack.base.conf.js');
- const HtmlWebpackPlugin = require('html-webpack-plugin');
- module.exports = merge(baseWebpackConfig, {
- mode: 'production',
- output: {
- filename: "js/[name].[chunkhash:16].js",
- },
- plugins: [
- new HtmlWebpackPlugin({
- template: 'public/index.html',
- inject: 'body',
- minify: {
- removeComments: true,
- collapseWhitespace: true,
- removeAttributeQuotes: true
- },
- })
- ]
- });
3. 编译前清理 dist 目录
现在, 如果你修改了你的业务代码, 然后重新编译, 你会发现在 dist/js 文件夹出现多个 js 文件因为导出的 js 文件 hash 已经不相同, 每次编译都会增加新的 js 文件, 原来的文件没有被删除所以, 我们需要在编译前进行清理 dist 文件夹
(1) 安装 clean-webpack-plugin
npm install --save-dev clean-webpack-plugin
(2) 修改 webpack.prod.conf.js, 使用 clean-webpack-plugin
- const merge = require('webpack-merge');
- const baseWebpackConfig = require('./webpack.base.js');
- const HtmlWebpackPlugin = require('html-webpack-plugin');
- const CleanWebpackPlugin = require('clean-webpack-plugin');
- module.exports = merge(baseWebpackConfig, {
- mode: 'production',
- output: {
- filename: "js/[name].[chunkhash:16].js",
- },
- plugins: [
- new HtmlWebpackPlugin({
- template: 'public/index.html',
- inject: 'body',
- minify: {
- removeComments: true,
- collapseWhitespace: true,
- removeAttributeQuotes: true
- },
来源: https://www.thinksaas.cn/group/topic/839159/