携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天，点击查看活动详情
实现自动打开浏览器、热更新和配置浏览器的默认端口号
⚠️注意：热更新在JS中表现的不明显，可以从一会儿要讲到的CSS身上进行介绍说明！
方式1
- 修改
package.json的script节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新：
"dev": "webpack-dev-server --hot --port 4321 --open"
方式2
- 修改
webpack.config.js文件，新增devServer节点如下：
devServer:{
hot:true,
open:true,
port:4321
}
- 在头部引入
webpack模块：
var webpack = require('webpack');
- 在
plugins节点下新增：
new webpack.HotModuleReplacementPlugin()
使用webpack打包css文件
- 运行
cnpm i style-loader css-loader --save-dev - 修改
webpack.config.js这个配置文件：
module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
]
}
- 注意：
use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的；
使用webpack打包less文件
- 运行
cnpm i less-loader less -D - 修改
webpack.config.js这个配置文件：
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
使用webpack打包sass文件
- 运行
cnpm i sass-loader node-sass --save-dev - 在
webpack.config.js中添加处理sass文件的loader模块：
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
使用webpack处理css中的路径
- 运行
cnpm i url-loader file-loader --save-dev - 在
webpack.config.js中添加处理url路径的loader模块：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }
- 可以通过
limit指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码：
{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },
使用babel处理高级JS语法
- 运行
cnpm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel的相关loader包 - 运行
cnpm i babel-preset-es2015 babel-preset-stage-0 --save-dev安装babel转换的语法。 - 在
webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
- 在项目根目录中添加
.babelrc文件，并修改这个配置文件如下：
{
"presets":["es2015", "stage-0"],
"plugins":["transform-runtime"]
}
- 注意：语法插件
**babel-preset-es2015**可以更新为**babel-preset-env**，它包含了所有的ES相关的语法；
相关文章
babel-preset-env：你需要的唯一Babel插件 Runtime transform 运行时编译es6
本文内容到此结束了，
如有收获欢迎点赞👍收藏💖关注✔️，您的鼓励是我最大的动力。
如有错误❌疑问💬欢迎各位大佬指出。
保持热爱，奔赴下一场山海。🏃🏃🏃
