webpack5最新构建————>3.2

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require ( "css-minimizer-webpack-plugin" ) ;//压缩css
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
process.env.NODE_ENV='production';

/*
tree shaking:去除无用代码
前提：1、必须使用ES6模块化 2、开启production环境
作用：减少代码体积

在package.json中配置
"sideEffects":false所有代码都没有副作用（都可以进行tree shaking）
"sideEffects":[".css","*.less"]

/
/
缓存：
第一种babel缓存————————————>用于打包时的缓存优化，提升打包速度
直接设置cacheDirectory:true
第二种
文件资源缓存————————————>用于生产环境的缓存优化
hash:每次webpack构建时会生成一个唯一的hash值
问题：因为js和css同时使用hash值。.
如果重新打包，会导致所有缓存失效。（可我只改动一个文件）
chunkhash:根据chunk生成的hash值。如果打包来源于同一个chunk,那么hash值就一样
问题：js和css的hash值还是一样的
因为css是在js中被引入的，所以同属一个chunk
contenthash:根据文件的内容生成的hash值。不同文件hash值一定不一样（可解决问题）
/
const commonCssLoader = [
MiniCssExtractPlugin.loader,//取代style-loader。作用：提取js中的css成单独文件
'css-loader',
'postcss-loader'
/
css兼容性处理： postcss --> postcss-loader postcss-preset-env
帮postcss找到package.json中browserslist里面的配置，通过加载指定的css兼容性样式
"browserslist": {
// 开发环境---》设置node环境变量process.env.NODE_ENV='development'
"development": [
"alst 1 chrome version",
"alst 1 firefox version",
"alst 1 safari version"
],
// 默认是看生产环境
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
}
*/
]
module.exports={
cache: {
type: "filesystem", // 使用文件缓存
idleTimeout: 60000,//缓存时效
},
entry:'./src/js/index.js',
output:{
filename:'js/built.[contenthash:10].js', //打包输出的文件
path: path.resolve(__dirname,'build') //打包输出地址文件夹
},
performance: {//关闭资产过大警告
hints: false,
},
module:{
rules:[
// loader的配置
{
test: /.js$/,
include: path.resolve(__dirname, 'src'),
enforce: 'pre',//优先读取
loader:'eslint-loader',//配置eslint语法规范
options:{
fix:true
}
},
{
oneOf:[//oneOf中的loader只会匹配一个，多个配置处理同一种类型文件需要单独提出来
{
// babel-loader基本js兼容性处理，只能转换基本语法如promise不能转换
test: /.js$/,
include: path.resolve(__dirname, 'src'),
loader:'babel-loader',
options:{
presets:[
[
'@babel/preset-env',
{
// 按需加载
useBuiltIns: 'usage',
// 指定core-js版本
corejs:{
version: 3.19
},
targets:{
chrome: '60',
firefox: '60',
ie: '9',
safari: '10',
edge: '17'
}
}
]
],
// 开启babel缓存
// 第二次构建时，会读取之前的缓存，提升打包速度（webpack4）
// cacheDirectory:true
}
},
{
// 处理css
test:/.css$/,
use:[
...commonCssLoader
],
},
{
test:/.less$/,
use:[
...commonCssLoader,
'less-loader'
]
},
{
// 处理图片
test:/.(jpg|png|svg|webp|gif)$/,
loader:'url-loader',
options:{
limit: 8 * 1024,
name:'[hash:10].[ext]',
// 关闭es6模块化
esModule:false,
outputPath:'imgs'
}
},
{
// 处理html中img资源
test:/.html$/,
loader:'html-loader'
},
{
// 处理其它资源
exclude:/.(html|js|css|less|jpg|png|gif)/,
loader:'file-loader',
options:{
name:'[hash:10].[ext]',
outputPath:'media'
}
}
]}
]
},
optimization: {
minimize: true,
minimizer: [
new CssMinimizerPlugin(),
],
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
minify:{//html最小化
collapseWhitespace:true,//移除空格
removeComments:true//移除注释
}
}),
new MiniCssExtractPlugin({
filename:'css/built.[contenthash:10].css'
}),
new ProgressBarPlugin()
],
mode:'production',
devServer:{
// contentBase:resolve(__dirname,'build'), //webpack4以下用法
static: { // static: ['assets']
directory: path.join(__dirname, 'build'),
},
compress:true,
port:3000,
open:true,
hot:true
},
devtool: 'eval-source-map' //一种提供源代码到构建后代代码映射技术（如果构建后代码出错了，通过映射可以追踪源代码错误）
}