javascript - Webpack 在 watch 上运行插件脚本

Question

我在 webpack 中设置了一个处理应用程序文件和 CSS 的插件。

webpack.config.js

const path = require('path');
const glob = require('glob');
const uglify = require("uglify-js");
const cleanCSS = require("clean-css");
const merge = require('webpack-merge-and-include-globally');

const mode = 'dev';
const ext = mode === 'prod' ? '.min' : ''; 

module.exports = (event, arg) => {  

  let config = {

  mode: mode === 'dev' ? 'development' : 'prod' ? 'production' : '',
  entry: {
    bundle : [ "./build/index.js" ] 
  }, 
  output: {
    path: __dirname + '/public',
    filename: "js/[name].js"
  },
  plugins: [
    new merge({
        files: {
          // concatenate angular app
          './app/app.js' : [ 
            './build/app/js/app.js',
            './build/app/js/controllers/*',
            './build/app/js/directives/*', 
            './build/app/js/services/*', 
          ],
          // compile scripts & css 
          './js/scripts.js' : [ './build/js/scripts.js' ],
          './css/style.css' : [ './build/css/*' ]
        },
        transform: { // minify in prod mode
        './app/app.js' : code => mode === 'prod' ? uglify.minify(code).code : code,
        './js/scripts.js' : code => mode === 'prod' ? uglify.minify(code).code : code,
        './css/style.css' : code => mode === 'prod' ? new cleanCSS({}).minify(code).styles : code
      }
  })
]
}
return config; 
}

当我运行 npm run build 时，脚本按预期工作，构建一个 bundle.js 和我的依赖项，一个 app.js应用程序，以及带有我的 css 的 style.css。

然而，当我运行 npm run watch 时，webpack 只监视 bundle.js - index.js 的入口文件。

是否可以指出 webpack 也监视插件的入口文件？或者我可以指出构建脚本是在更改某些任意文件时触发的吗？

Answer 1

我能够使用 webpack-watch-files 找到解决方案插件

const WatchExternalFilesPlugin = require('webpack-watch-files-plugin').default;

  new WatchExternalFilesPlugin({
    files: [
      './build/app/js/**/*.js',
      './build/js/*.js',
      './build/css/*.css',
      // '!./src/*.test.js'
    ]
  })

** 注意:Webpack 4 需要 require 语句中的 .default