const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HashedModuleIdsPlugin = require("webpack-hashed-module-id-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const merge = require('webpack-merge');
const common = require('./webpack.common.config.js');
const webpack= require('webpack');
var path = require("path");
module.exports = merge(common,{
entry: {
main: './src/app.js',
vendor: ['react','react-dom','redux-thunk']
},
output: {
path: path.resolve(__dirname, "dist"),
filename:"[name].[chunkhash].bundle.js",
chunkFilename:"[name].[chunkhash].chunk.js"
},
//devtool:'source-map',
mode: 'production',
module: {
rules: [
{
test: /\.scss$/,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
}
]
},
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
chunks: 'all',
name: 'vendor',
test: 'vendor',
enforce: true
}
}
},
runtimeChunk: 'single'
},
plugins: [
new webpack.HashedModuleIdsPlugin({
// Options...
}),
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
chunkFilename: "[name].[contenthash].chunk.css"
}),
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('production')
}
})
/*,
new webpack.SourceMapDevToolPlugin({
filename: '[name].js.map',
exclude: 'vendor'
})*/
]
});
输出结果如下:
如果我将一个新的 scss 文件导入到 app.js 文件中。
import './app.scss';
新的输出结果为:
![enter image description here](https://istack.dev59.com/Rn0HD.webp)