Question

以下生产webpack.config文件主要工作（构建，运行正常），但一个唠叨问题。我精确地设置了供应商和应用程序js输出以分离供应商代码（因为这些代码不经常更改）。但是，使用.config设置，即使没有更改，我总是为vendor和app.js获取不同的块哈希。我必须以某种方式设置这个错误，但我不知道它可能是什么。请帮忙！

var path = require('path');
var webpack = require('webpack');
var node_modules_dir = path.resolve(__dirname, 'node_modules');
var AssetsPlugin = require('assets-webpack-plugin');
var ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
var app_dir = path.join(__dirname, 'app');

var config = {
    entry: {
      vendors: ['react', 'react-dom', 'moment'],
      app: path.resolve(__dirname, 'app/Main.js')
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[chunkhash].js',
        chunkFilename: '[name].[chunkhash].js'
    },
    module: {
        loaders: [{
              test: /\.jsx?$/, // A regexp to test the require path. accepts either js or jsx
              exclude: [node_modules_dir],
              loader: 'babel', // The module to load. "babel" is short for "babel-loader"
            },
            // LESS
            {
              test: /\.less$/,
              loader: 'style!css!less'
            },
            {
              test: /\.css$/, // Only .css files
              loader: 'style!css' // Run both loaders
            },
            {
              test: /\.(png|jpg)$/,
              loader: 'url?limit=25000'
            },
            { test: /\.gif$/, loader: "url-loader?mimetype=image/png" },
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" },
            { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader?name=[name].[ext]" }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: "vendors",
            minChunks: Infinity
        }),
        new AssetsPlugin({
            filename: 'webpack-assets.js',
            path: path.resolve(__dirname, 'dist'),
            processOutput: function (assets) {
                return 'window.staticMap = ' + JSON.stringify(assets);
            }
        }),
        new ChunkManifestPlugin({
            filename: "chunk-manifest.json",
            manifestVariable: "webpackManifest"
        }),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin(),
        new webpack.DefinePlugin({
          'process.env': {
            'NODE_ENV': '"production"'
          },
          '__appSettings': {
              'apiGatewayDomain': '"http://localhost:8088"',
              'enableDevTools': false,
              'enableReduxLogger': false
          },
            __version: JSON.stringify(require(__dirname +"/package.json").version)
        }),
        new webpack.ProvidePlugin({
            'fetch': 'imports?this=>global!exports?global.fetch!isomorphic-fetch',
            'configureApplicationStore': 'exports?configureStore!' +  app_dir + '/global/redux/ConfigureStore.prod.js'
          })
    ]
};

module.exports = config;

如果此设置还有其他明显问题，请告知我们。谢谢！

Answer 1

使用＆＃34;键排序＆＃34;固定供应商。你输入就像这样：

entry: {
  a_vendors: ['react', 'react-dom', 'moment'],
  z_app: path.resolve(__dirname, 'app/Main.js')
},

供应商将修复。

更多细节：

https://github.com/webpack/webpack/issues/1315#issuecomment-247269598 https://github.com/webpack/webpack/pull/2998

webpack生产设置 - 供应商输出js总是有不同的块哈希，即使没有任何改变

1 个答案: