webpack生产环境基础配置

//生产环境基本配置
//1）提取css成单独文件  2）css兼容性处理  3）压缩css  4）js语法检查  5）js兼容性处理  6）js压缩  7）HTML压缩
const { resolve } = require('path');   //node.js的模块化，处理路径
const MiniCssExtractPlugin = require('mini-css-extract-plugin');   //将css从Js文件中提取出来，安装命令：npm install --save -dev mini-css-extract-plugin 
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin' );   //压缩css，安装命令：npm install --save -dev optimize-css-assets-webpack-plugin 
const HtmlWebpackPlugin = require('html-webpack-plugin');    //打包html
process.env.NODE_ENV = 'production';   
const commonCssLoader = [ 
	MiniCssExtractPlugin.loader,    //这个loader取代style-loader。作用：提取js中的css成单独文件 
	'css-loader',        //将css文件整合到js文件中 
	{ 
		//处理css兼容性,安装命令 npm install --save -dev postcss-loaderpostcss-preset-env 
		//还需要在package.json 中定义 browserslist 
		/*
		"browserslist": { 
			"development": [ 
				"last 1 chrome version", 
				"last 1 firefox version", 
				"last 1 safari version" 
			], 
			"production": [ 
				">0.2%", 
				"not dead", 
				"not op_mini all" 
			] 
		}*/
		loader: 'postcss-loader', 
		options: { 
			ident: 'postcss', 
			plugins: () => [
				//postcss的插件 
				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'] ,
			}, 
			/*正常来讲，一个文件只能被一个loader处理。 
			当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序：
			先执行eslint在执行babel
			*/ 
			/*
			 语法检查：eslint-loader eslint       安装命令：npminstall--save-deveslint-loadereslinteslint-config-airbnb-baseeslint-plugin-import
			 注意：只检查自己写的源代码，第三方的库是不用检查的
			 设置检查规则： 
			 package.json中eslintConfig中设置~ 
			 "eslintConfig": { 
				 "extends": "airbnb-base" 
				} 
				airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint
			*/ 
		  {
		  //在package.json中eslintConfig --> airbnb 
				test: /\.js$/, 
				exclude: /node_modules/, 
				//优先执行 
				enforce: 'pre', 
				loader: 'eslint-loader', 
				options: { 
					//自动修复eslint的错误 
					fix: true ,
				}
		  }, 
			{
				test: /\.js$/, 
				exclude: /node_modules/, 
				loader: 'babel-loader', 
				options: { 
					//预设：指示babel做怎么样的兼容性处理 
					presets: [ 
						[ 
							'@babel/preset-env', 
							{ 
								//按需加载 
								useBuiltIns: 'usage', 
								//指定core-js版本 
								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', 
					esModule: false ,
				},
			}, 
			{
				test: /\.html$/, 
				loader: 'html-loader'
			}, 
			{
				exclude: /\.(js|css|less|html|jpg|png|gif)/, 
				loader: 'file-loader', 
				options: { outputPath: 'media' }
			}
		]
	}, 
	plugins: [ 
		new MiniCssExtractPlugin({ 
			filename: 'css/built.css'   //对输出的css文件进行重命名 
		}), 
		new OptimizeCssAssetsWebpackPlugin(),   //压缩css
		new HtmlWebpackPlugin({ 
			template: './src/index.html', 
			//压缩html代码
			minify: { 
				//移除空格
				collapseWhitespace: true, 
				//移除注释
				removeComments: true ,
			} ,
		})
	], 
	//生产环境下会自动压缩js代码 
	mode: 'production' ,
};

此文章由尚硅谷熊键老师课程整理出来。