Webpack手表没有做只是运行webpack的一切。

时间:2016-08-01 16:52:32

标签: windows webpack

好的,一张图片值1000字:

C:\gitrepo\dev\Web\Secured Account Access\Member [erochanges +101 ~4 -0 !]> webpack -d --watch
Webpack build starting: 1/8/2016 @ 11:26:38
clean-webpack-plugin: C:\gitrepo\dev\Web\Secured Account Access\Member\build\js has been removed.
Hash: 51337dd0be7daf80bbaf
Version: webpack 1.13.1
Time: 4923ms
                                         Asset       Size  Chunks             Chunk Names
         fetchpolyfill.0d39e51d8193e9047bf8.js    12.7 kB          [emitted]
    babel-polyfill.a0f0baed01fffd04dd66.min.js  242 bytes       0  [emitted]  babel-polyfill
    errorValidator.92845383126defed29e7.min.js  246 bytes       2  [emitted]  errorValidator
     fetchpolyfill.0d39e51d8193e9047bf8.min.js    7.01 kB       3  [emitted]  fetchpolyfill
    paymentoptions.217e18de338d68b7686f.min.js      12 kB       4  [emitted]  paymentoptions
            common.1524774d345143c7bf98.min.js     170 kB       5  [emitted]  common
        babel-polyfill.a0f0baed01fffd04dd66.js  260 bytes          [emitted]
               confirm.0169b72e33797a5d8946.js    17.3 kB          [emitted]
        errorValidator.92845383126defed29e7.js  264 bytes          [emitted]
           confirm.0169b72e33797a5d8946.min.js    5.83 kB       1  [emitted]  confirm
        paymentoptions.217e18de338d68b7686f.js    21.7 kB          [emitted]
                common.1524774d345143c7bf98.js     450 kB          [emitted]
babel-polyfill.a0f0baed01fffd04dd66.min.js.map  667 bytes       0  [emitted]  babel-polyfill
       confirm.0169b72e33797a5d8946.min.js.map      41 kB       1  [emitted]  confirm
errorValidator.92845383126defed29e7.min.js.map  671 bytes       2  [emitted]  errorValidator
 fetchpolyfill.0d39e51d8193e9047bf8.min.js.map    34.2 kB       3  [emitted]  fetchpolyfill
paymentoptions.217e18de338d68b7686f.min.js.map    57.3 kB       4  [emitted]  paymentoptions
        common.1524774d345143c7bf98.min.js.map    1.06 MB       5  [emitted]  common
   [0] multi babel-polyfill 28 bytes {0} [built]
   [0] ./confirm.js 3.07 kB {1} [built]
   [0] multi errorValidator 28 bytes {2} [built]
   [0] multi fetchpolyfill 28 bytes {3} [built]
   [0] multi paymentoptions 28 bytes {4} [built]
 [314] ./errorValidator.js 757 bytes {5} [built]
 [315] ./vendor/fetchpolyfill.js 52 bytes {3} {4} [built]
 [317] ./paymentoptions.js 8.56 kB {4} [built]
    + 314 hidden modules
----------------------------------------------------------------------------
Hash: dfaf3d5b8e90ad0cbbd1
Version: webpack 1.13.1
Time: 3431ms
                                  Asset       Size  Chunks             Chunk Names
    confirm.4223b8e2ab9faa4d53bd.min.js    5.83 kB       1  [emitted]  confirm
     common.d88bf4fa955260af5738.min.js     170 kB       5  [emitted]  common
 babel-polyfill.a0f0baed01fffd04dd66.js  260 bytes          [emitted]
        confirm.4223b8e2ab9faa4d53bd.js    17.3 kB          [emitted]
 errorValidator.92845383126defed29e7.js  264 bytes          [emitted]
  fetchpolyfill.0d39e51d8193e9047bf8.js    12.7 kB          [emitted]
 paymentoptions.217e18de338d68b7686f.js    21.7 kB          [emitted]
         common.d88bf4fa955260af5738.js     450 kB          [emitted]
confirm.4223b8e2ab9faa4d53bd.min.js.map      41 kB       1  [emitted]  confirm
 common.d88bf4fa955260af5738.min.js.map    1.06 MB       5  [emitted]  common
   [0] ./confirm.js 3.06 kB {1} [built]
    + 321 hidden modules

我第一次启动手表时,一切都在发生,正如我所期待的那样。一旦我保存更改并且webpack启动,你会发现错过了两个步骤(我用虚线表示第一次通话和第二次通话):

  1. 1个插件我使用(clean-webpack-plugin)并未被调用
  2. 我的webpack.config文件顶部的Console.log语句未被调用。
  3. 这是我的webpack.config.js文件:

    /// <binding ProjectOpened='Watch - Development' />
    let fs = require('fs');
    let path = require('path');
    let webpack = require('webpack');
    let currentDate = new Date();
    
    
    console.log("Webpack build starting: " +
        currentDate.getDate() +
        "/" +
        (currentDate.getMonth() + 1) +
        "/" +
        currentDate.getFullYear() +
        " @ " +
        currentDate.getHours() +
        ":" +
        currentDate.getMinutes() +
        ":" +
        currentDate.getSeconds());
    
    //webpack plugins
    let cleanWebPackPlugin = require('clean-webpack-plugin');
    let assetPlugin = require('assets-webpack-plugin');
    let webpackOnBuildPlugin = require('on-build-webpack');
    
    
    let isProd = (JSON.stringify(process.env.NODE_ENV.replace(/\"/g, "") || 'prod') === '"prod"');
    
    let plugins = [
        new cleanWebPackPlugin(['build/js'], {
            root: path.resolve('.'),
            verbose: true,
            dry: false
        }),
        new webpack.optimize.CommonsChunkPlugin('common', 'common.[chunkhash].min.js', 3),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new assetPlugin(
        {
            path: path.resolve('build/js/')
        }),
        new webpackOnBuildPlugin(function (stats) {
            if (!isProd) {
                //when in dev return the regular file instead of the minified file.
                String.prototype.replaceAll = function (search, replacement) {
                    var target = this;
                    return target.split(search).join(replacement);
                };
    
                fs.readFile(path.resolve('build/js/webpack-assets.json'), 'utf8', function (err, data) {
                    var results = data.replaceAll(".min", "");
                    fs.writeFile(path.resolve('build/js/webpack-assets.json'),
                        results,
                        "utf8",
                        function (err) {
                            if (err) return console.log(err);
                        });
                });
            }
        })
    ];
    
    
    if (!isProd) {
        let unminifiedWebpackPlugin = require('unminified-webpack-plugin');
        plugins.push(new unminifiedWebpackPlugin());
    }
    
    module.exports = {
        context: path.resolve('scripts'),
        entry: {
            confirm: "./confirm",
            "fetchpolyfill": ["./vendor/fetchpolyfill"],
            "errorValidator": ["./errorValidator"],
            'paymentoptions': ["./paymentoptions"],
            'babel-polyfill': ['babel-polyfill']
        },
        output: {
            path: path.resolve('build/js/'),
            publicPath: '/build/js/',
            chunkFilename: "[name]" + ".[chunkhash].js",
            filename: "[name]" + ".[chunkhash].min.js"
        },
        plugins: plugins,
        module: {
            loaders: [
                {
                    test: /\.es6$/,
                    exclude: ["/Scripts/vendor/", "node_modules"],
                    loader: "babel-loader"
                }
            ]
        },
    
        resolve: {
            extensions: ["", ".js", ".es6"]
        }
    
    }
    

    为什么我的console.log错过了,而且更重要的是,我的clean-webpack-plugin

0 个答案:

没有答案