世界上最伟大的投资就是投资自己的教育
其实 clean-webpack-plugin 很容易知道它的作用,就是来清除文件的。
一般这个插件是配合 webpack -p
这条命令来使用,就是说在为生产环境编译文件的时候,先把 build或dist
(就是放生产环境用的文件) 目录里的文件先清除干净,再生成新的。
1. 为什么要用 clean-webpack-plugin
如果还不理解为什么要用它,就看看下面的例子就可以知道的。
webpack.config.js
const path = require('path')
...
module.exports = {
entry: {
"app.bundle": './src/app.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkhash].js'
},
...
};
在终端上运行:
$ npm run prod
看看 dist
目录:
dist
├── app.bundle.e56abf8d6e5742c78c4b.js
├── index.html
└── style.css
你再把 src/app.js
改改内容,然后再执行 npm run prod
。
再多运行几次,生成的带 hash 的 app.bundle.js
文件就会很多。
dist
├── app.bundle.0e380cea371d050137cd.js
├── app.bundle.259c34c1603489ef3572.js
├── app.bundle.e56abf8d6e5742c78c4b.js
├── index.html
└── style.css
这些带 hash 的 app.bundle.js
只有最新的才有用,其他的都没用,我们要在 build 之前把它们全清空,这真是 clean-webpack-plugin 发挥的作用。
2. 使用 clean-webpack-plugin
首先来安装。
$ npm i clean-webpack-plugin --save-dev
webpack.config.js
const path = require('path')
...
const CleanWebpackPlugin = require('clean-webpack-plugin');
let pathsToClean = [
'dist',
]
module.exports = {
entry: {
"app.bundle": './src/app.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkhash].js'
},
...
plugins: [
new CleanWebpackPlugin(pathsToClean),
...
new ExtractTextPlugin('style.css')
],
...
};
现在运行 npm run prod
试试,只有下面的文件:
dist
├── app.bundle.0e380cea371d050137cd.js
├── index.html
└── style.css
先到这里。
03:521FreeWebpack 3 零基础入门视频教程 #1 - 介绍
03:382FreeWebpack 3 零基础入门视频教程 #2 - 安装
07:373FreeWebpack 3 零基础入门视频教程 #3 - 实现 hello world
03:414FreeWebpack 3 零基础入门视频教程 #4 - Webpack 的配置文件 Webpack.config.js
11:095FreeWebpack 3 零基础入门视频教程 #5 - 使用第一个 Webpack 插件 html-Webpack-plugin
12:516FreeWebpack 3 零基础入门视频教程 #6 - 使用 loader 处理 CSS 和 Sass
06:247FreeWebpack 3 零基础入门视频教程 #7 - 初识 Webpack-dev-server
05:098FreeWebpack 3 零基础入门视频教程 #8 - 用 Webpack 和 babel 配置 React 开发环境
05:07FreeWebpack 3 零基础入门视频教程 #9 - 用 clean-Webpack-plugin 来清除文件
06:3810FreeWebpack 3 零基础入门视频教程 #10 - 配置多个 HTML 文件
04:0911FreeWebpack 3 零基础入门视频教程 #11 - 如何使用 pug (jade) 作为 HTML 的模板
07:5312FreeWebpack 3 零基础入门视频教程 #12 - 如何使用模块热替换 HMR 来处理 CSS
06:3313FreeWebpack 3 零基础入门视频教程 #13 - 生产环境 vs 开发环境
10:2114FreeWebpack 3 零基础入门视频教程 #14 - 如何打包图片
▬▬▬▬▬▬ 联系我 👋 ▬▬▬▬▬▬
微信:qiuzhi99pro
b 站:https://space.bilibili.com/31152817
知乎:https://www.zhihu.com/people/rails365
Github:https://github.com/hfpp2012
Youtube:https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg
© 汕尾市求知科技有限公司 | 创业者社区 | Rails365 Gitlab | Qiuzhi99 Gitlab | Railstart 创业项目 | 知乎 | b 站 | 搜索
粤公网安备 44152102000088号
| 粤ICP备19038915号