小白学 Webpack之自动打包监听 watch 和清理

webpack watch 监听

默认情况下,我们每次打包都是手动,我们可以通过配置watch来监听文件更改,自动打包更新
webpack.config.js

module.exports = {
  //入口文件
  entry: {
    index: './src/js/index.js'
  },
  output: {
    //文件名
    filename: 'js/[name].js',//这里需要修改成输出文件,不能写死
    path: path.resolve(__dirname, './dist/'),
    publicPath: '',
  },
  watch: true,
     watchOptions: {
    ignored:/node_modules/,
    aggregateTimeout:300,
    poll:1000
  }
    ....

现在我们webpack --watch一下

clear-weabpack-plugin 清理目录

npm i -D clean-webpack-plugin

配置webpack.config.js

//清除目录
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports={

  plugins: [
    new HtmlWebpackPlugin({
      filename:"index.html",
      template:"./src/index.html"
    }),
    new CleanWebpackPlugin()
  ],

这样每次打包都会先清除输出目录。不需要人工删除

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。