说明
玩转webpack课程学习笔记。
bundle，chunk，module
bundle：打包最终生成的文件chunk：每个chunk是由多个module组成，可以通过代码分割成多个chunk。module：webpack中的模块（js、css、图片等等）
当前构建时的问题
每次构建的时候不会清理目录，造成构建的输出目录 output 文件越来越多。
通过 npm scripts 清理构建目录
rm -rf ./dist && webpack rimraf ./dist && webpack
rimraf 包的作用：
npm i rimraf -D
以包的形式包装rm -rf命令，用来删除文件和文件夹的，不管文件夹是否为空，都可删除。
使用（比如）
const rimraf = require('rimraf'); // 删除当前目录下的 test.txt rimraf('./test.txt', function (err) { console.log(err); }); //删除dist目录 rimraf(path.resolve(__dirname, '../dist'),err =>{ if(err) throw err })
"scripts": { "build": "rimraf dist && webpack" },
自动清理构建目录
1、避免构建前每次都需要手动删除 dist 文件夹
2、使用 clean-webpack-plugin
npm i clean-webpack-plugin -D
- 默认会删除
output指定的输出目录
3、配置plugins
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { entry: { index: './src/index.js', search: './src/search.js' }, output: { path: path.join(__dirname, 'dist'), filename: '[name]_[chunkhash].js' }, mode: 'production', plugins: [ new CleanWebpackPlugin() ] };
