1.修改 filename
// entry 对象是用于 webpack 查找启动并构建 bundle。其上下文是入口文件所处的目录的绝对路径的字符串。
entry: './src/index.js',
// 输出文件配置
output: {
// 文件名称
filename: '[name].bundle.js',
// 文件路径
path: path.resolve(process.cwd(), 'dist')
},
entry 如果传入一个字符串或字符串数组，chunk 会被命名为 main。如果传入一个对象，则每个键(key)会是 chunk 的名称，该值描述了 chunk 的入口起点。
filename 有以下几种配置方式
- 使用入口名称：
filename: "[name].bundle.js" - 使用内部 chunk id：
filename: "[id].bundle.js" - 使用每次构建过程中，唯一的 hash 生成：
filename: "[name].[hash].bundle.js" - 使用基于每个 chunk 内容的 hash：
filename: "[chunkhash].bundle.js"
2. 自动生成 index.html
之前的 index.html 是手动创建到 dist 路径中；现在使用 HtmlWebpackPlugin 来自动生成。
2.1 安装
<!--Webpack 5-->
yarn add html-webpack-plugin -D
<!--Webpack 4-->
yarn add html-webpack-plugin@4 -D
2.2 修改配置文件
plugins: [
new HtmlWebpackPlugin({
title: "5. 管理输出"
})
],
// 输出文件配置
output: {
// 文件名称
filename: '[name].bundle.js',
// 文件路径
path: path.resolve(process.cwd(), 'dist')
},
2.3 执行打包
打包完成后打开 index.html 可看到文字和图片，并且 title 变成5. 管理输出
3. 清理 /dist 文件夹
在每次构建前清理 /dist 文件夹，是比较推荐的做法，只会生成用到的文件。使用 clean-webpack-plugin 完整这个需求。
3.1 安装
yarn add clean-webpack-plugin -D
3.2 修改配置文件
plugins: [
// 输出路径下所有文件都将被清除
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: "5. 管理输出"
})
],
3.3 执行打包
打包完成后，可以发现之前的旧文件都被清除。
