WebPack构建环境的搭建

构建环境介绍

1. 从js文件中提取出css文件，如果用webpack打包一个项目的话，它会把项目中的css文件与js文件打包成一个js文件，在构建环境时，一般都需要把css文件从js文件中提取出来。
2. 将代码进行压缩，webpack有2种模式，一个叫 development，是开发模式，这个模式能让代码在本地运行，另一个叫 production，是生产模式，这个模式能让代码优化上线，在这个模式下需要压缩代码，提高运行的性能。
3. 兼容性设置，有些CSS3的新特性，在某些浏览器中不兼容，这就导致在webpack打包的时候，有些样式不被运用，就需要配置一些兼容性的设置。

从js文件中提取出css文件

这个需要用到 mini-css-extract-plugin插件，用法如下：
在webpack的配置文件 webpack.config.js中做如下配置
先引入这个插件

// 还需要引入 path 模块中的 resolve 方法(通过解构赋值的方式)
const {resolve} = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

然后进行5大配置

// 配置入口文件
entry:'./src/index.js',
// 配置编译输出文件的路径和名称
output:{
	filename:'build.js',
	// resolve 方法负责拼接路径
	path:resolve(__dirname,'build')
}
module:{
	rules:[
		{
			test:/\.css$/,
			// 创建style标签，将样式放入
			// 'style-loader',
			// 这个loader取代style-loader。作用：提取js中的css成单独文件
			MiniCssExtractPlugin.loader,
			// 将css文件整合到js文件中
			'css-loader'
		}
	]
}
plugins:[
	// 配置编译html文件的插件
	new HtmlWebpackPlugin({
		// 指定解析模板
		template:'./src/index.html'
	}),
	new MiniCssExtractPlugin({
		// 设置css文件的输出目录及文件名
		filename:'css/build.css'
	})
],
// 配置 webpack 的模式是开发模式，还是生产模式
mode:'development',  // production
// 配置自动化编译
// 特点：只会在内存中编译打包，不会有任何输出
devServer:{
	// 项目构建后路径
	contentBase:resolve(__dirname,'build'),
	// 启动gzip压缩
	compress:true,
	// 端口号
	port:3000,
	// 自动打开浏览器
	open:true
}

css的兼容性处理

需要用到 postcss —> postcss-loader, postcss-preset-env 这两个包，先下载

npm i postcss-loader postcss-preset-env 

接下来配置 webpack.config.js 文件,接下来所演示的是简略写法，因为只需要配置 module

module:{
	rules:[
		test:/\.css$/,
		use:[
			MiniCssExtractPlugin.loader,
			'css-loader',
			// css兼容性处理：postcss ----> postcss-loader postcss-preset-env
			// 帮 postcss 找到 package.json 中 browserslist 里面的配置,通过配置加载指定的css兼容性样式
			// 如果需要某个loader的配置，就需要用对象的形式使用它
			{
				loader:'postcss-loader',
				options:{
					// 固定写法
					ident:'postcss',
					plugins:()=>{
						// postcss 的插件
						require('postcss-preset-env')()
					}
				}
			}
		]
	]
}

接下来是配置 package.json 中的 browserslist，下面只是举个例子，更多的 browserslist配置，可以在GitHub上搜索browserslist

"browserslist":{
	"development":[
		// 距离最近的一个版本
		"last 1 chrome version",
		"last 1 firefox version",
		"last 1 safari version"
	],
	"production":[
		">0.2%",
		"not dead",
		"not op_mini all"
	]
}

基于上面的代码，必须要设置一个基于node的环境变量才可以，在 webpack.config.js 页面的上面做如下声明：

process.env.NODE_ENV = development

如何压缩css

压缩css需要引入一个插件（optimize-css-assets-webpack-plugin），因为代码重复较多，还是只展示需要修改的代码：

先下载：

npm i optimize-css-assets-webpack-plugin -D

下载之后引入：

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')

这个插件的使用非常简单，只需要在plugins中配置一下即可，如下：

plugins:[
	// 压缩css
	new OptimizeCssAssetsWebpackPlugin()
]

js语法检查eslint

需要eslint-loader 和 eslint，先下载，再配置
注意：第三方库不用检查，只检查自己写的源代码
设置检查规则：在package.json 中 eslintConfig中设置

// 需要下载 airbnb ---> eslint-config-airbnb-base  eslint-plugin-import  eslint 这3个库
"eslintConfig":{
	"extends":"airbnb-base"
}

还需要在 webpack.config.js 中配置module：

{
	test:/\.js$/,
	// 排除第三方库
	exclude:/node_modules/,
	loader:'eslint-loader',
	options:{
		// 自动修复eslint的错误
		fix:true
	}
}

使用这一行代码，可以让下一行eslint所有规则都失效（下一行不进行eslin检查）

// eslint-disable-next-line

js的兼容性处理

有一些es6+的语法，在一些浏览器是不支持，比如说IE浏览器不支持箭头函数，会报语法错误等，这就需要做js的基本兼容性处理：babel-loader @babel/core @babel/preset-env
module中的rules应该这样配置：

{
	test:/\.js$/,
	exclude:/node_modules/,
	loader:'babel-loader',
	options:{
		// 预设：指示babel做怎么样的兼容性处理
		presets:['@babel/preset-env']
	}
}

添加了如上配置后，会把箭头函数转换成普通函数定义一样。IE可以运行
注意：上面的这个方案，只能转换基本语法，如promise等高级语法不能转换
所以接下来提出第二种解决方案：
全部js兼容性处理：@babel/polyfill，使用简单，只需要在入口文件引入即可，在index.js中加入如下代码：

import '@babel/polyfill';

使用第二种方案处理过的js文件，体积会变得较大，因为处理了所有的兼容性问题。
所以现在引入第三种方案，按需加载兼容性处理，----> core-js，需要在module中做如下配置:

{
	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:'60',
					ie:'9',
					safari:'10',
					edge:'17'
				}
			}
		]
	}
}

第三种方案与第二种方案不能同时使用，使用第三种方案的同时需要把import ‘@babel/polyfill’ 注释掉。
一般使用第一种方案和第三种方案结合起来解决js的兼容性问题，第二种方案的js文件体积太大，不予考虑

HTML和JS的压缩

只要将 mode 写成 production 就会自动压缩JS代码

压缩HTML代码，使用 html-webpack-plugin 插件，做如下配置：

// 先引入
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 在 plugins 中配置
plugins:[
	new HtmlWebpackPlugin({
		template:'./src/index.html',
		// 压缩 HTML 代码的配置
		minify:{
			// 移除空格
			collapseWhitespace:true,
			// 移除注释
			removeComments:true
		}
	})
]

下一篇将介绍 生产环境下的基本配置