热加载//开发服务器devServer：用来开发时自动编译，自动打开浏览器，自动刷新浏览器
//特点：指挥在内存中编译代码，不会有任何输出。
//启动devServer指令位：webpack-dev-server
1、下载npm i webpack-dev-server -D
2、npx webpack-dev-server
devServer:{
contentBase:resolve(__dirname,’build’),
//启动gzip压缩,文件更小，响应更快
compress:true,
//端口号
prot:3000,
//自动打开浏览器
open:true
}
//注意：devServer功能的npx webpack-dev-server是没有输出文件的，最终打包还是要用webpack

开发环境的基本配置思路

1、在src中，不同类型的文件要放到不同文件夹下。
2、在import或是url/src的过程中要确保路径正确
3、在输出时outputPath这个属性可以加在module->rules->options->对应的配置文件中加一个outputPath:”对应文件夹”

生产环境做什么事？

1、缩小代码，进行压缩
2、把CSS抽离js，防止闪屏
3、处理不兼容的版本问题
更快、更平稳

处理CSS样式问题

需求1：分离出css文件
1、下载mini-css-extract-plugin
2、const MiniCssExtractPlugin=require(‘mini-css-extract-plugin’)
3、use:[
//创建style标签，将样式放入
//‘style-loader’
MiniCssExtractPlugin.loader,//代替上面的style-loader。作用：提取js中的CSS成单独文件
注：这里可以在option中操作outputPath:’../‘来改变css中图片的路径，less同理
//将CSS文件整合到js文件中
‘css-loader’
]
4、plugins:[
new MiniCssExtractPlugin({
filename:’css/build.css’
})
]

CSS兼容性处理

1、使用库postcss 下载编译器postcss-loader 下载插件postcss-preset-env
2、在use下写如下代码：
//使用loader的默认配置
//‘postcss-loader’
//修改loader的配置需要用大括号给包起来
{
loader:’postcss-loader’,
options:{
ident:’postcss’,
//固定写法
plugins:()=[
//帮助postcss库找到package.json中 browserslist里面的配置，通过配置加载指定的CSS兼容性样式
require(‘postcss-preset-env’)()
]
}
}
3、在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”
]
}
4、加入测试代码：display:flex;backface-visibility:hidden;
5、在webpack.config.js的上面设置nodejs的环境变量
process.env.NODE_ENV=”development”

CSS压缩

1、下载插件optimize-css-assets-webpack-plugin
2、require引入为OptimizeCssAssetsWebpackPlugin
3、在plugins里加入
plugins:[
压缩CSS
new OptimizeCssAssetsWebpackPlugin()
]

js的语法检查

规范所有人的代码风格类似
1、语法检查的常用工具eslint
2、下载 eslint-loader eslint
3、在package.json中加入eslintConfig
“eslintConfig”:{
//继承这个类
“extends”:”airbnb-base”
}
4、在module->rules->加入规则
{
//注意：只检查自己写的源代码，第三方的库是不用检查的
//设置检查规则：
//https:github.com/topics/javascript airbnb/javascript中的中文文档
//使用airbnb库下载eslint-config-airbnb-base 、 eslint 、 eslint-plugin-import
在package.json中eslintConfig中设置
test:/.js$/,
exclude:/node_modules/,
loader:’eslint-loader’,
option:{
//自动修复eslint错误
fix:true
}
}
5、生产环境下不要有console.log(‘heihei’);
有一个命令 //eslint-disable-next-line 可以让下一行不做eslist检查

JS兼容性处理

1、基本兼容性处理

babel-loader @babel/core @bable/preset-env
rules:[{
test:/.js$/,
exclude:/node_modules/,
loader:’babel-loader’,
options:{
//预设：指示babel做怎么样的兼容性处理
presets:[‘@babel/preset-env’]
}
}]
新版本要加上targets:{“chrome”:”58”,”ie”:”11”}
新版本不写可能就直接兼容ES6语法了

2、全部兼容性处理

@babel/polyfill

1、下载@babel/polyfill
2、直接在使用的根文件夹里引入
import ‘@babel/polyfill’
注：问题：体积太大

3、按需加载兼容性问题(最终方案与第一个方案同时使用）

core-js下载
1、上代码
rules:[{
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’
}
}
]
}
}]

压缩JS和HTML

JS压缩

1、生产环境下会自动压缩代码
2、mode:’production’

html压缩

1、在plugins:[
new HtmlWebpackPlugin({
template:’./src/index.html,
//压缩html代码
minify:{
//移除空格
collapseWhitespace:true,
//移除注释
removeComments:true
}
})
]