热模块更新
为什么要用热模块更新呢?
比如,我做了css样式的修改,当我想要在不刷新当前页面html的前提下,让样式渲染出来,就需要用到热模块更新了,相关配置:
在webpack.config.js文件中,对devServer和plugins进行配置
const webpack = require('webpack') // 移入webpack 在plugins中需要用到它的热模块加载方法
module.exports = {
devServer:{
open:true,
contentBase:'./dist',
port:8888,
hot:true, // 热加载
hotOnly:true, // 即使html不生效,我也不让它刷新页面
},
plugins:[
// 使用热模块更新方法
new webpack.HotModuleReplacementPlugin()
],
}
使用 Babel处理 ES6语法
有些时候,像一些低版本浏览器是不能识别我们的ES6语法的,控制台会直接提示报错了,那么我们出于兼容的考虑,就需要做很多兼容性代码了,是不是很麻烦?
而通过配置webpack中的Babel,就给我们带来了很大的遍历,他可以自动把我们书写的ES6语法转换成浏览器可识别的语言,怎么进行配置呢?
1.对业务代码进行打包转换
首先下载依赖:
npm install --save-dev babel-loader @babel/core
npm install @babel/preset-env --save-dev // 对es6语法进行转换
npm install --save @babel/polyfill // 对语法进行补全
然后在webpack.config.js中进行配置
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
options:{
presets: [['@babel/preset-env',{
// 自动识别当前代买需要补全的语法,而不是全部引入,
// 大大减少了打包后的体积
useBuiltIns:'usage'
}]]
}
}
]
},
在你当前书写js的文件最顶部引入abel/polyfill
import "@babel/polyfill"
2. 对于自己开发的第三方模块或者ui组件库时,另一种方式更加合理,不会污染全局变量
- 首先下载依赖:
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
npm install @babel/runtime-corejs2 --save
- 在当前项目根目录下创建
.babelrc
文件,复制以下代码
{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": 2,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}