Webpack处理各类型资源(三)——生产环境

生产环境是代码优化上线运行的环境

生产环境配置目录：

process.env.NODE_ENV = ‘development’
process.env.NODE_ENV = ‘production’
css =>
①提取css成单独文件
②css兼容处理
③压缩css
js =>
①js语法检查
②js兼容处理
③压缩js
html =>
①压缩html

提取css成单独文件（plugins）：

众所周知我们都知道页面加载先加载css，再加载js，然而开发环境中，我们将css模块化到js文件中，如果不处理，就上线，容易造成闪屏。

mini-css-extract-plugin

css兼容处理（loader）：

postcss-loader
postcss-preset-env

置前请将这张图片的事项看完

效果图

压缩css(plugins)：

optimize-css-assets-webpack-plugin
效果图

JS语法检查（loader）

eslint-loader
依赖包
eslint
eslint-config-airbnb-base
eslint-plugin-import

步骤在图里

效果图：

开启
options{
	fix: true
}
会自动帮你调试格式

配置JS语法检测中，遇到的问题：

①vscode会全局爆红，会检测你的webpack文件配置格式
自行csdn论坛搜索vscode关闭eslint。关闭之后，依然会对项目核心js文件进行检测不必担心

JSES6语法兼容（loader）

babel-loader
@babel/core：核心库
@babel/preset-env： es6->es5翻译器

@babel/polyfill(不到万不得已最后一种不要用)

三种方案处理es6兼容

①基础js兼容性处理->@babel/preset-env
问题：只能转换基本语法，例如promise高级语法不能转换


②全部js兼容性处理->@babel/polyfill
问题：当我们只要解决部分兼容性问题，但是将所有兼容性代码都引入，体积太大了~
直接在入口文件引入这个包就行了

整个包花了441kib

③需要做兼容性处理的就做：按需加载
该方案3不与方案2共存
core-js

按需加载花了104kib

JS压缩

将mode改为生产模式，就会自动压缩js代码，无需任何插件

HTML代码压缩（plugins）

html-webpack-plugin