一. 简介
生产的配置在开发上面进行优化，优化点后面---
npm install --save-dev mini-css-extract-plugin
二. 安装
在开发的安装上在增加一些
npm install --save-dev mini-css-extract-plugin
npm install css-minimizer-webpack-plugin --save-dev
npm install terser-webpack-plugin --save-dev
三. 配置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
// 入口
entry: {
index: './src/index.js',
},
// 出口
output: {
// publicPath: "./tt", // 需要部署的线上路径----
filename: 'script/[name].bundle.js',
path: path.resolve(__dirname, './dist'), // 輸出目录
clean: true
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html', // 引用的模板
filename: 'index.html',
inject: 'body' // 资源引入的位置
}),
new MiniCssExtractPlugin({
filename: 'styles/[contenthash].css',
})
],
mode: 'production', // 生产模式----
devtool: false, // source-map----
devServer: {
static: './dist',
},
module: {
rules: [
{ // 所有 .png 文件都将被发送到输出目录，并且其路径将被注入到 bundle 中
test: /\.(png|svg)/,
type: 'asset/resource',
generator: {
filename: 'static/[hash][ext]' // 表示dist目录下生成资源目录
}
},
// {
// test: /\.svg/,
// type: 'asset/source' // 导出资源的源代码
// },
{
test: /\.(css|scss)$/,
use: [
MiniCssExtractPlugin.loader, // link引入
'css-loader', // 加载css
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'autoprefixer',
{
// 选项
},
],
],
},
},
},
'sass-loader' // 将 Sass 编译成 CSS
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
generator: {
filename: 'static/iconfont/[hash][ext]' // 表示dist目录下生成资源目录
}
},
{
test: /\.js$/,
exclude: /node_modules/, // 排除node_modules目录
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
optimization: {
minimizer: [
// For webpack@5 you can use the `...` syntax to extend existing minimizers (i.e. `terser-webpack-plugin`), uncomment the next line
// `...`,
new CssMinimizerPlugin(), // 压缩 CSS 文件
new TerserPlugin() // 压缩js
],
splitChunks: { // 将第三方的包打入一个文件中，避免多次引入同一个第三方库
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
}