build-utils/webpack.production.js
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
const webcomponentsjs = './node_modules/@webcomponents/webcomponentsjs';
const common = require('./webpack.common.js');
const polyfills = [
{
from: path.resolve(`${webcomponentsjs}/webcomponents-*.{js,map}`),
to: 'vendor',
},
{
from: path.resolve(`${webcomponentsjs}/bundles/*.{js,map}`),
to: 'vendor/bundles',
},
{
from: path.resolve(`${webcomponentsjs}/custom-elements-es5-adapter.js`),
to: 'vendor',
},
];
const assets = [
{
from: 'src/assets/icons',
to: 'src/assets/icons/',
},
{
from: 'src/assets/img',
to: 'src/assets/img/',
},
{
from: 'src/assets/download',
to: 'download/',
},
];
module.exports = merge(common, {
mode: 'production',
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: {
mode: 'local',
exportGlobals: true,
localIdentName: '[path][name]__[local]--[contenthash:base64:5]',
localIdentContext: path.resolve(__dirname, 'src'),
localIdentHashPrefix: 'bn-styles',
},
},
},
],
},
],
},
optimization: {
minimize: true,
},
plugins: [
new CleanWebpackPlugin(),
new webpack.optimize.MinChunkSizePlugin({ minChunkSize: 10000 }),
new CopyPlugin({ patterns: [...polyfills, ...assets] }),
new HtmlPlugin({
filename: 'index.html',
template: './src/index.html',
minify: {
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true,
},
}),
new MiniCssExtractPlugin(),
],
});