一、大概步骤

1. 处理css文件

• css文件处理：使用插件mini-css-extract-plugin.loader取代style-loader，css-loader进行处理
• less文件处理：相对css处理，新增less-loader
• 兼容性处理：使用postcss-loader，需要在package.json中指示兼容性处理做什么条件，定义browserslist。browserslist，默认使用生产环境，使用开发环境需要定义process.env.NODE_ENV = 'development'
• css压缩：使用插件optimize-css-assets-webpack-plugin，直接new调用。

2. 处理js文件

• js语法检查：使用插件eslint-loader，需要在package.json中定义eslintConfig。"eslintConfig": {"extends": "airbnb-base"}，通过fix:true，修复检查中出现的问题。
• js兼容性处理：使用babel-loader进行处理，通过presets属性，指定使用@/babel/preset-env,通过useBuiltIns:‘usage’,实现按需加载，通过corejs设定使用版本corejs:{version：3},通过targets指定浏览器版本。

3. 处理图片

• 使用url-loader进行处理，通过limit进行规定多大图片进行base64处理，通过name进行重新命名,通过outputPath设定输出路径

4. 处理html文件

• 通过插件html-webpack-plugin，new调用使用插件，通过template指定html为模板。通过minify进行html压缩
• 处理当中的图片：使用html-loader进行处理

5. 处理其他文件

• 使用file-loader进行处理。，outputPath设定输出目录

二、webpack.config.js文件

const { resolve } = require("path");
//处理css
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
//css压缩
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 处理html
const HtmlWebpackPlugin = require('html-webpack-plugin')
//定义nodejs环境变量，决定使用browserslist的哪个环境
process.env.NODE_ENV = 'production';
//复用cssloader处理
cosnt commonCssLoader = [
	MiniCssExtractPlugin.loader,
	'css-loader',
	//css兼容处理
	{
		//还需要在package.json中定义browserslist
		loader:'postcss-loader',
		options:{
			ident:'postcss',
			plugins:() => [
				require('postcss-preset-env')()
			]
		}
	}
]
module.exports = {
  	entry:'./src/js/index.js',
	output:{
		filename:'js/built.js',
		path:resolve(__dirname,'build')
	},
	module:{
		rules:[
			{
				test:/\.css$/,
				use:[...commonCssLoader],
			},
			{
				test:/\.less$/,
				use:[...commonCssLoader,'less-loader'],
			},
			{
				test:/\.js$/,
				exclude:/node_modules/,
				enforce:'pre',
				loader:'eslint-loader',
				options:{
					fix:true
				}
			},
			//js兼容处理
			{
				test:/\.js$/,
				exclude:/node_modules/,
				loader:'babel-loader',
				options:{
					presets:[
						[
							'@babel/preset-env',
							{
								useBuiltIns:'usage',
								corejs:{version:3},
								targets:{
									chrome:'60',
									firefox:'50'
								}
							}
						]
					]
				}
			},
			//处理图片
			{
				test:/\.(jpg|png|gif)/,
				loader:'url-loader',
				options:{
					limit:8*1024,
					name:'[hash:10].[ext]',
					outputPath:'imgs',
					exModule:false,
				}
			},
			//处理html中的img
			{
				test:/\.html$/,
				loader:'html-loader',
			},
			//处理其他文件
			{
				exclude:/\.(js|css|less|html|gif|png|jpg)/,
				loader:'file-loader',
				options:{
					outputPath:'medis',
				}
			}
		]
	},
	plugins:[
		//处理css
		new MiniCssExtractPlugin({
			filename:'css/built.css'
		}),
		//压缩css
		new OptimizeCssAssetsWebpackPlugin(),
		//处理html
		new HtmlWebpackPlugin({
			template:'./src/index.html',
			//压缩html
			minify:{
				//去掉空格
				collapseWhitespace:true,
				// 去掉注释
				removeComments:true,
			}
		})
	],
	mode:'production',
}

三、package.json文件

"browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
},
"eslintConfig": {"extends": "airbnb-base"}