Webpack 在手表上运行插件脚本答案

【问题标题】：Webpack run plug-in scripts on watchWebpack 在手表上运行插件脚本
【发布时间】：2019-01-21 14:14:20
【问题描述】：

我用一个插件来处理应用程序文件和 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 监视入口文件？或者我可以表明构建脚本是在更改某些任意文件时触发的？

【问题讨论】：

标签： javascript webpack watch webpack-watch

【解决方案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'
    ]
  })

** 注意：.default 在 Webpack 4 中需要声明

【讨论】：