mnswpr/webpack.config.js
2019-12-16 18:21:49 +08:00

88 lines
No EOL
2.3 KiB
JavaScript

const FileSystem = require('fs');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const env = process.env.NODE_ENV
const config = {
mode: env || 'development'
}
module.exports = {
entry: {
main: './src/index.js',
},
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist'),
},
optimization: {
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
splitChunks: {
chunks: 'all',
},
},
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// all options are optional
filename: '[name].[contenthash].css',
chunkFilename: '[id].css',
ignoreOrder: false, // Enable to remove warnings about conflicting order
}),
function() {
this.plugin('done', function(statsData) {
var stats = statsData.toJson();
if (!stats.errors.length) {
var htmlFileName = 'index.html';
var html = FileSystem.readFileSync(path.join(__dirname, htmlFileName), 'utf8');
console.log(stats.assetsByChunkName.main);
var htmlOutput = html.replace(
/vendors~main.bundle.js/i,
stats.assetsByChunkName['vendors~main']);
htmlOutput = htmlOutput.replace(
/main.bundle.css/i,
stats.assetsByChunkName.main[0]);
htmlOutput = htmlOutput.replace(
/main.bundle.js/i,
stats.assetsByChunkName.main[1]);
FileSystem.writeFileSync(
path.join(__dirname, 'dist', htmlFileName),
htmlOutput);
}
})
}
],
module: {
rules: [
{
test: /\.css$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
'css-loader',
],
},
{
test: /\.(png|jpe?g|gif|ico)$/i,
use: [
{
loader: 'file-loader',
options: {
name: 'assets/[name].[ext]',
},
},
],
},
],
},
};