代码之家  ›  专栏  ›  技术社区  ›  yevg

Webpack运行插件脚本

  •  1
  • yevg  · 技术社区  · 5 年前

    我有一个处理应用程序文件的插件&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 我的申请,还有 style.css 用我的css。

    但是当我跑的时候 npm run watch webpack只监视条目文件

    有没有可能表明webpack也会监视插件的入口文件?或者我可以指出构建脚本是在更改某些任意文件时触发的吗?

    1 回复  |  直到 5 年前
        1
  •  4
  •   yevg    5 年前

    我可以用 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语句中,需要与webpack4一起使用