Question

    var webpack = require('webpack');
    var path = require('path');
    let ExtractTextPlugin = require("extract-text-webpack-plugin");
    var WebpackNotifierPlugin = require('webpack-notifier');
    var fs = require('file-system');
    var CleanWebpackPlugin = require('clean-webpack-plugin');
    var WebpackBuildNotifierPlugin = require('webpack-build-notifier');


    module.exports = {
    /*node: {
      fs: "empty"
    },*/
        resolve: {
        alias: {
          'masonry': 'masonry-layout',
          'isotope': 'isotope-layout'
        }
      },
        entry: './main.js',
        devtool: 'source-map',
        output: {
            path: path.resolve(__dirname, './public/js'),
            filename: 'bundle.[chunkhash].js',
        },

        module: {
            rules: [
             {  test: /\.js$/, 
                    exclude: /node_modules/, 
                    loader: "babel-loader?presets[]=es2015",

                 },

                {
                    test:/\.scss$/,
                    use: ExtractTextPlugin.extract({
                        use: [{loader:'css-loader?sourceMap'}, {loader:'sass-loader', options: {
                        sourceMap: true,

                    }}],

                    })
                },   



                {
                     test: /\.vue$/,
            loader: 'vue-loader',
            options: {
              loaders: {
              }
              // other vue-loader options go here
            }
          },



            ]
        },  

        plugins: [

    new CleanWebpackPlugin(['js/*', 'css/*'], {
                root: '/Users/steve/sites/laravel/public',
                dry: false,
                watch: true,
        }),


     new WebpackBuildNotifierPlugin({
          title: "My Project Webpack Build",
          successSound: 'Blow',
          failureSound: 'Basso'
         // suppressSuccess: true
        }),

            //new webpack.optimize.UglifyJsPlugin(),
            new ExtractTextPlugin('../css/app.[chunkhash].css'),
            new WebpackNotifierPlugin({alwaysNotify: true}),

            function() {
                this.plugin('done', stats =>{
                    fs.writeFileSync(
                        path.join(__dirname, 'manifest.json'),
                        JSON.stringify(stats.toJson().assetsByChunkName)
                    )

                });
            }

        ]

};

以上是我的webpack配置文件。当保存任何一个时，它应该使用CleanWebpackPlugin删除.js和app.css文件，并用新的替换它们，并附加一个cunkhash密钥。

这是在读取manifest.json文件时尝试缓存清除。

如果我保存.scss文件，则会生成 app.0e2634cfba7a3ea1284e.css 而js不会生成。

我可以让它替换两个文件的唯一方法是在JS文件中实际写一行并保存。

任何人都可以帮助我获得我需要的行为吗？

Webpack js没有保存

0 个答案: