Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Webpack.prd.conf - Problem with naming chunks
const path = require('path');
const utils = require('./utils');
const webpack = require('webpack');
const config = require('../config');
const merge = require('webpack-merge');
const baseWebpackConfig = require('./webpack.base.conf');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
let env;
switch (process.env.NODE_ENV) {
case 'testing':
env = require('../config/test.env');
break;
case 'e2e-mock':
env = require('../config/e2e-mock.env');
break;
case 'cit':
env = require('../config/cit.env');
break;
default:
env = config.build.env;
}
const webpackConfig = merge(baseWebpackConfig, {
output: {
path: config.build.assetsRoot,
filename: utils.assetsPath('js/[name].[chunkhash:3].js'),
chunkFilename: utils.assetsPath('js/chunk-[name].[chunkhash:3].js')
},
optimization: {
minimize: true
},
mode: 'production',
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.dev.assetsSubDirectory,
ignore: ['.*']
}
]),
new UglifyJsPlugin({
parallel: true,
sourceMap: false,
extractComments: {
banner: 'The website uses open source software please visit URL below for overview of the licenses\nhttp://app.tracking.here.com/HERE_NOTICE',
},
}),
// extract css into its own file
new MiniCSSExtractPlugin({
filename: utils.assetsPath('css/[name].[contenthash:3].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true
}),
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } } : { safe: true }
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing' ? 'index.html' : config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more: https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
utils.momentLocaleRemoval
]
});
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin');
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(' + config.build.productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
})
);
}
if (config.build.bundleAnalyzerReport) {
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
webpackConfig.plugins.push(new BundleAnalyzerPlugin());
}
module.exports = webpackConfig;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment