95 lines
2.9 KiB
JavaScript
95 lines
2.9 KiB
JavaScript
const path = require('path')
|
|
|
|
const HtmlWebpackPlugin = require('html-webpack-plugin')
|
|
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
|
|
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
|
|
.BundleAnalyzerPlugin
|
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
|
|
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
|
|
const WebpackBar = require('webpackbar')
|
|
|
|
module.exports = (env, argv) => {
|
|
const isEnvProduction = argv.mode === 'production'
|
|
const isEnvDevelopment = argv.mode === 'development'
|
|
|
|
return {
|
|
output: {
|
|
path: path.resolve(__dirname, 'build'),
|
|
filename: 'static/js/[name].[contenthash:8].js',
|
|
chunkFilename: 'static/js/[name].[contenthash:8].chunk.js'
|
|
},
|
|
devtool: isEnvProduction ? 'source-map' : 'cheap-module-source-map',
|
|
module: {
|
|
rules: [
|
|
// process javascript with babel
|
|
{
|
|
test: /\.js$/,
|
|
exclude: /node_modules/,
|
|
loader: require.resolve('babel-loader')
|
|
},
|
|
// process css. css modules are enabled.
|
|
{
|
|
test: /\.css$/,
|
|
use: [
|
|
isEnvDevelopment && require.resolve('style-loader'),
|
|
isEnvProduction && MiniCssExtractPlugin.loader,
|
|
{
|
|
loader: require.resolve('css-loader'),
|
|
options: {
|
|
modules: {
|
|
localIdentName: isEnvProduction
|
|
? '[hash:base64]'
|
|
: '[path][name]__[local]'
|
|
}
|
|
}
|
|
},
|
|
require.resolve('postcss-loader')
|
|
].filter(Boolean)
|
|
}
|
|
]
|
|
},
|
|
optimization: {
|
|
minimize: isEnvProduction,
|
|
splitChunks: {
|
|
chunks: 'all',
|
|
name: false
|
|
},
|
|
runtimeChunk: {
|
|
name: entrypoint => `runtime-${entrypoint.name}`
|
|
}
|
|
},
|
|
resolve: { modules: ['src', 'lib', 'node_modules'] },
|
|
plugins: [
|
|
// creat an index.html
|
|
new HtmlWebpackPlugin(),
|
|
// show a progress bar
|
|
new WebpackBar(),
|
|
// create a report.html for bundle size
|
|
// extract css to css files
|
|
isEnvProduction &&
|
|
new MiniCssExtractPlugin({
|
|
filename: 'static/css/[name].[contenthash:8].css',
|
|
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css'
|
|
}),
|
|
// use cssnano to minify css
|
|
isEnvProduction &&
|
|
new OptimizeCssAssetsPlugin({
|
|
cssProcessorOptions: {
|
|
map: { inline: false, annotation: true }
|
|
}
|
|
}),
|
|
isEnvProduction &&
|
|
new BundleAnalyzerPlugin({
|
|
analyzerMode: 'static',
|
|
openAnalyzer: false
|
|
})
|
|
// hot reload not working right now
|
|
// isEnvDevelopment &&
|
|
// new ReactRefreshWebpackPlugin({ disableRefreshCheck: true })
|
|
].filter(Boolean),
|
|
devServer: {
|
|
stats: 'minimal'
|
|
}
|
|
}
|
|
}
|