Question

我正在使用webpack生成我的捆绑包和供应商。

我的问题是，由于我已经将编译器添加到我的编译中，我的编译时间从 2s到20s （在慢速机器上，你可以等待40秒）。

我注意到 sourceMap 一直在生成，但是当我正在编译生产时，它没有优化生成 sourceMap 然后用< em> Uglify 插件。我想我错过了某个地方！

我已经尝试了#eval，但重量是4倍的时间更大，而且编译速度也更快（甚至更慢）。

所以我正在寻找圣餐： *一种禁用所有编译的sourceMap的方法 *一种只为供应商禁用sourceMap的方法（用于开发） *一个缓存系统，只重新编译已更改的文件（如使用--watch时）

我的工作流程是在本地计算机上使用dev env（所以我使用--watch），然后使用编译所有内容的 Jenkins 将其推送到我的开发服务器。在服务器上使用watch不是一个选项（我保持 webpack 是最新的，如果我更改供应商列表，我必须重新启动--watch））

一个选项可能是从我的webpack配置中删除供应商，但这将是我的最后一次尝试。

我的 webpack.config.js ：

var path = require('path');
var webpack = require('webpack');

var jsPath = path.join(__dirname, './src/js/src/');
var vendorPath = path.join(__dirname, './src/js/src/vendors/');

// Detect environnement from package.json or command line
var prod = process.argv.indexOf("--prod") > -1;
var dev = process.argv.indexOf("--dev") > -1;

module.exports = {
    entry: {
        app: jsPath + 'init.js',
        vendor: [
            vendorPath + 'jquery.js',
            vendorPath + 'bootstrap.js',
            vendorPath + 'nunjucks.js',
            vendorPath + 'jquery.pickmeup.js',
            vendorPath + 'select2.js',
            vendorPath + 'select2_ext.js'
        ]
    },
    // Key for ProvidePlugin
    resolve: {
        alias: {
            jquery: vendorPath + 'jquery.js'
        }
    },
    output: {
        path: path.join(__dirname, './src/js/build/'),
        filename: 'bundle.js',
        publicPath: ''
    },
    devtool: prod ? "" : "#inline-source-map",
    module: {
        loaders: [
            {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader", query: {compact: false}}
        ]
    },
    plugins: [
        // Expose $ as global variable
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        // Concat vendors files
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendor",
            filename: "vendor.js",
            minChunks: Infinity
        }),
        // Set __DEBUG__ global variable
        new webpack.DefinePlugin({
            __DEBUG__: dev
        })
    ]
    // In 'production', Uglify all JS chunked files
        .concat(prod ?
            [
                new webpack.optimize.UglifyJsPlugin({
                    compress: {
                        warnings: false
                    },
                    sourceMap: false,
                    mangle: {
                        except: ['$', 'exports', 'require']
                    }
                })
            ]
            : []
        )
};

Answer 1

您可以直接使用SourceMapDevToolPlugin而不是devtool，以排除某些块生成源地图。例如，如果您要排除vendor和polyfills捆绑包：

config.plugins.push(new webpack.SourceMapDevToolPlugin({
  filename: '[name].js.map',
  exclude: ['vendor.js', 'polyfills.js']
}));

Webpack在供应商编译

1 个答案: