webpack生产环境基本配置

webpack.config.js 中的基本配置

如下：

const {resolve} = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')


// 复用 loader
const commonCssLoader = [
	MiniCssExtractPlugin.loader,
	'css-loader',
	{
		// 还需要在 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:[
					MiniCssExtractPlugin.loader,
					'css-loader',
					{
						// 还需要在 package.json 中定义browserslist
						loader:'postcss-loader',
						options:{
							ident:'postcss',
							plugins:()=>{
								require('postcss-preset-env')()
							}
						}
					}
				]
			},
			{
				test:/\.less$/,
				use:[
					// 展开运算符展开这个数组，实现 loader 复用
					...commonCssLoader, 
					'less-loader'
				]
			},
			// 正常来讲，一个文件只能被一个 loader 处理
			// 当一个文件要被多个 loader 处理，那么一定要指定 loader 执行的先后顺序：
			// 先执行 eslint-loader 再执行 babel-loader
			{
				// JS语法检查
				// 需要在 package.json 中配置 eslintConfig ---> airbnb
				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:'60'
							}
						}
					]
				}
			},
			{
				// 处理图片资源
				test:/\.(jpg|png|gif)$/,
				loader:'url-loader',
				options:{
					limit:8 * 1024,
					name:'[hash:6].[ext]',
					outputPath:'imgs',
					esModule:false
				}
			},
			{
				// 处理 HTML 中的图片问题
				test:/\.html$/,
				// 使用 commonJS 语法
				loader:'html-loader'
				
			},
			{
				// 处理其他文件资源
				exclude:/\.(js|css|html|less|jpg|png|gif)$/,
				loader:'file-loader',
				options:{
					outputPath:'media'
				}
			}
			
		]
	},
	plugins:[
		// 将css从js文件中提取出来
		new MiniCssExtractPlugin({
			filename:'css/built.css',
		}),
		// 压缩css文件
		new OptimizeCssAssetsWebpackPlugin(),
		// 处理 HTML 资源
		new HtmlWebpackPlugin({
			template:'./src/index.html',
			minify:{
				collapseWhitespace:true,
				removeComments:true
			}
		})
	],
	mode:'production'

}

结束