webpack5 （四）
react-cli 中配置
开发环境
const path = require('path')
const EslintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
//封装处理样式配置
const getStyleloaders = (pre)=>{
return [
'style-loader',
'css-loader',
// 处理 css 兼容性问题
//需要配合 package.json 中的browserslist 来指定兼容性做到什么程度
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: 'postcss-preset-env'
}
}
},
pre
].filter(Boolean)
};
//要用 commonjs的方式以对象的模式暴露出去
module.exports = {
// 入口文件
entry: './src/main.js',
// 出口文件
output: {
path: undefined,
filename: 'static/js/[name].js',
chunkFilename: 'static/js/[name].chunk.js',
assetModuleFilename: 'static/media/[hash:10][etx][query]'
},
// 配置loader
module: {
rules: [
// 处理 css
{
test: /\.css$/,
use: getStyleloaders()
},
{
test: /\.less$/,
use: getStyleloaders('less-loader')
},
{
test: /\.s[ac]ss$/,
use: getStyleloaders('sass-loader')
},
{
test: /\.styl$/,
use: getStyleloaders('stylus-loader')
},
// 处理 图片
{
test:/\.(jpe?g|png|gif|webp|svg)$/,
type:'asset',
parser:{
dataUrlCondition:{
maxSize:10*1024,
}
}
},
//处理其他资源
{
test:/\.(woff2?|ttf)$/,
type:'asset/resource'
},
// 处理 js
{
test:/\.jsx?$/,
include:path.resolve(__dirname,'../src'),
loader:'babel-loader',//babel 也需要有一个 babel 的配置文件
options:{
catchDirectory:true,
catchCompression:false,
plugins:[
'react-refresh/babel',//用来解决react脚手架下 js不能热更新的问题
]
}
}
]
},
// 配置plugin
// 处理html
plugin:[
//eslint 插件也是需要有自己的配置文件
new EslintWebpackPlugin({
context:path.resolve(__dirname,'../src'),
exclude:'node_modules',
cache:true,
cacheLocation:path.resolve(__dirname,'../node_modules/.catch/.eslintcache'),
}),
new HtmlWebpackPlugin({
template:path.resolve(__dirname,'../public/index.html'),
}),
new ReactRefreshWebpackPlugin()//用来解决react脚手架下 js不能热更新的问题
],
// 环境设置
mode:'development',
devtool:'cheap-module-source-map',
optimization:{
splitChunks:{
chunks:'all'
},
runtimeChunk:{
name:(entrypoint)=>`runtime~${entrypoint.name}.js`,
}
},
//webpack 解析模块加载选项
// 解决运行react项目时报错 Module not found:Error:can't resolve './App' in 'xx/xxx/xxx/x'
resolve:{
//自动补全文件扩展名
extentions:['.jsx','.js','json']
},
devServer:{
host:'localhost',
port:3000,
open:true,
hot:true,
historyApiFallback:true,//解决前端路由刷新404问题
}
}生产模式
const path = require('path')
const EslintWebpackPlugin = require('eslint-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 生产模式下不需要激活热更新
// const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
// CSS提取为单独文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// css 压缩文件
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
// js 压缩，使用css压缩后必须使用的插件
const TerserWebpackPlugin = require('terser-webpack-plugin')
// 图片 压缩插件
const ImageMinimizerWebpackPlugin = require('image-minimizer-webpack-plugin')
// 如果出现 网站图标 需要用该复制插件将其复制到dist目录下
const CopyPlugin = require("copy-webpack-plugin");
const getStyleloaders = (pre) => {
return [
// 'style-loader',
MiniCssExtractPlugin.loader,//将style-loader替换为插件loader，打包为单独文件
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: 'postcss-preset-env'
}
}
},
pre
].filter(Boolean)
};
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, '../dist'),//设置出口文件路径
filename: 'static/js/[name].[contenthash:10].js',//加入哈希值
chunkFilename: 'static/js/[name].[contenthash:10].chunk.js',//加入哈希值
assetModuleFilename: 'static/media/[hash:10][etx][query]',
clean: true,//将上次打包内容清空
},
module: {
rules: [
{
test: /\.css$/,
use: getStyleloaders()
},
{
test: /\.less$/,
use: getStyleloaders('less-loader')
},
{
test: /\.s[ac]ss$/,
use: getStyleloaders('sass-loader')
},
{
test: /\.styl$/,
use: getStyleloaders('stylus-loader')
},
{
test: /\.(jpe?g|png|gif|webp|svg)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 10 * 1024,
}
}
},
{
test: /\.(woff2?|ttf)$/,
type: 'asset/resource'
},
{
test: /\.jsx?$/,
include: path.resolve(__dirname, '../src'),
loader: 'babel-loader',
options: {
catchDirectory: true,
catchCompression: false,
// 生产模式下不需要激活热更新
// plugins:[
// 'react-refresh/babel',
// ]
}
}
]
},
plugin: [
new EslintWebpackPlugin({
context: path.resolve(__dirname, '../src'),
exclude: 'node_modules',
cache: true,
cacheLocation: path.resolve(__dirname, '../node_modules/.catch/.eslintcache'),
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, '../public/index.html'),
}),
// new ReactRefreshWebpackPlugin(),// 生产模式下不需要激活热更新
// css 打包为单独文件插件
new MiniCssExtractPlugin({
filename: 'static/css/name.[contenthash:10].css',
chunkFilename: 'static/css/name.[contenthash:10].chunk.css'
}),
// 复制插件 处理public下其他资源 如网站图标
new CopyPlugin({
patterns: [
// 设置从何处复制到何处
{
from: path.resolve(__dirname,'../public'),
to: path.resolve(__dirname,'../dist')
},
],
globOptions: {
//设置忽略 index.html 文件
ignore: ['**/index.html']
}
}),
],
mode: 'production', // 改为生产模式
devtool: 'source-map',//使用 source-map
optimization: {
splitChunks: {
chunks: 'all'
},
runtimeChunk: {
name: (entrypoint) => `runtime~${entrypoint.name}.js`,
},
// 压缩插件放在 optimization 对象内
minimizer: [
new CssMinimizerWebpackPlugin(),//压缩 css 插件，
new TerserWebpackPlugin(),//压缩 js 插件，
//压缩图片插件，
new ImageMinimizerWebpackPlugin({
minimizerOptions: {
plugins: [
["gifsicle", { interlaced: true }],
["jpegtran", { progressive: true }],
["optipng", { optimizationLevel: 5 }],
[
"svgo",
{
plugins: extendDefaultPlugins([
{
name: "removeViewBox",
active: false,
},
{
name: "addAttributesToSVGElement",
params: {
attributes: [{ xmlns: "http://www.w3.org/2000/svg" }],
},
},
]),
},
],
],
},
}),
]
},
resolve: {
extentions: ['.jsx', '.js', 'json']
},
//生产模式不需要devsever
// devServer:{
// host:'localhost',
// port:3000,
// open:true,
// hot:true,
// historyApiFallback:true,
// }
}合并配置
将生产模式和开发模式的配置进行合并，通过 process.env.NODE_ENV 的值来判断当前为生产环境还是开发环境。
const isProd = process.env.NODE_ENV ==='production'
//三元判断 加载哪一个插件
isProd ? MiniCssExtractPlugin.loader : 'style-loader',
//根据是否为生产模式来决定是否加载插件
plugins:[
!isProd && 'react-refresh/babel',//用来解决react脚手架下 js不能热更新的问题
].filter(Boolean)