javascript - Webpack 在手表上运行插件脚本

Question

我已经使用插件处理应用程序文件和 css 设置了 webpack。

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我的应用程序和style.css我的 css 构建一个。

但是，当我运行npm run watchwebpack 时，只监视bundle.jsindex.js 的入口文件。

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

标签： javascriptwebpackwatchwebpack-watch

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'
    ]
  })

** 注意：.default在 require 语句中需要使用 Webpack 4