webpack5最新搭建配置——>2

webpack.config.js
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
// process.env.NODE_ENV='development';
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={
entry:'./src/js/index.js',
output:{
filename:'js/built.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'
}
}
]
]
}
},
{
// 处理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:7].[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:7].[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.css'
}),
],
mode:'development',
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' //一种提供源代码到构建后代代码映射技术（如果构建后代码出错了，通过映射可以追踪源代码错误）
}

package.json
{
"devDependencies": {
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.0",
"babel-loader": "^8.2.3",
"core-js": "^3.19.1",
"css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.1.3",
"eslint": "^7.32.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.25.3",
"file-loader": "^6.2.0",
"html-loader": "^3.0.1",
"html-webpack-plugin": "^5.5.0",
"less-loader": "^10.2.0",
"mini-css-extract-plugin": "^2.4.4",
"postcss-loader": "^6.2.0",
"postcss-preset-env": "^6.7.0",
"url-loader": "^4.1.1",
"webpack": "^5.63.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.4.0"
},
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
},
"eslintConfig": {
"extends": "airbnb-base",
"rules": {
"no-console": "off"
}
}
}