3.5 plugin
作用于webpack打包整个周期，webpack的打包过程是（有生命周期概念）钩子
扩展插件，在 Webpack 构建过程中的特定时机注入扩展逻辑来改变构建结果或想要做的事
3.5.1 HtmlWebpackPlugin
htmlwebpackplugin会在打包结束后，自动生成一个html文件，并把打包生成的js模板加入到该html中
npm install --save-dev html-webpack-plugin
new HtmlWebpackPlugin({
title:'hello world',
template:'./index.html'
}),
配置：
| 名称 | 作用 | eg |
|---|---|---|
| title | 生成html页面中的header | 需要设置html中title为（固定格式） <title><%= htmlWebpackPlugin.options.title %></title> |
| filename | 输出的html文件名 默认是index.html,也可以直接配置带有子目录的 | '/public/index.html' |
| template | 模板html文件路径 | ./index.html 绝对路径相对路径都支持 |
| inject | true或body或false或head | 默认true，前两者添加js到body底部，后两张添加js到head |
| favicon | ico的路径，会自动输出到生成的目录中 | './favicon.ico' |
3.5.2 clean-webpack-plugin
在打包的时候清除生成的无效文件
npm install --save-dev clean-webpack-plugin
const {CleanWebpackPlugin}=require('clean-webpack-plugin');
new CleanWebpackPlugin(),
3.5.2 clean-webpack-plugin
抽离css并且把css添加到html上
npm install --save-dev mini-css-extract-plugin
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
需要再css-loader前加一个loder
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"]
}
new MiniCssExtractPlugin({
filename: "[name][chunkhash:8].css"
})
3.6 devtool
源代码与打包后的代码的映射关系，通过sourceMap定位到源代码
devtool的介绍：https://webpack.js.org/configuration/devtool#devtool
eval:速度最快,使用eval包裹模块代码,
source-map： 产生 .map 文件
cheap:较快，显示行数，不包含列信息
Module：第三方模块，包含loader的sourcemap（比如jsx to js ，babel的sourcemap）
inline： 将 .map 作为DataURI嵌入，不单独生成 .map 文件
开发环境推荐开启
devtool:"cheap-module-eval-source-map"
3.7 WebpackDevServer
启动服务，提升开发效率
- 安装
npm install webpack-dev-server -D
- 配置修改下package.json
"scripts": {
"server": "webpack-dev-server"
},
- 在webpack.config.js配置
devServer: {
contentBase: "./dist",//生成目录
open: true, // 是否打开浏览器
port: 8081, //端口
proxy:{
'/api':{ //以api开头的，不支持正则
target:"http://localhost:3004",// 目标机器
pathRewrite: {"^/api" : ""}//重写url 匹配可以使用正则
}
}
},
在启动的时候其实不生成文件，把文件都储存在物流内存中，提升开发效率
3.8 hot-module-replacement
HMR:热模块替换，不支持抽离出的css变化
npm i hot-module-replacement -D
devServer: {
contentBase: "./dist",
open: true,
hot:true,//启用 webpack 的模块热替换特性
hotOnly:true,//即便便HMR不生效，浏览器器也不自动刷新，就开启hotOnly
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
如果非框架书写的
if (module.hot) { // 当模块b发生变化的时候，进行删除元素并重新执行
module.hot.accept("./b", function() {
document.body.removeChild(document.getElementById("number"));
number();
});
}
// 框架书写的看框架使用的插件
[框架布局刷新](https://www.webpackjs.com/guides/hot-module-replacement/)
[文档](https://www.webpackjs.com/api/hot-module-replacement/)
4.babel
中文网站
babel是JavaScript编译器器，能将ES6代码转换成ES5代码，让我们开发过程中放心使用JS新特性而不用担心兼容性问题。并且还可以通过插件机制根据需求灵活的扩展。
Babel在执行行编译的过程中，会从项目根目录下的 .babelrc JSON文件中读取配置。没有该文件会从loader的options地方读取配置。
npm i babel-loader @babel/core @babel/preset-env -D
1.babel-loader是webpack 与 babel的通信桥梁，不会做把es6转成es5的工作，这部分工作需要用到@babel/preset-env来做
2.@babel/preset-env里包含了了es6，7，8转es5的转换规则
env是babel7之后推行的预设插件
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"]
}
}
}
通过上面的几步 还不够，默认的Babel只支持let等一些基础的特性转换，Promise等一些还没有转换过来，这时候需要借助@babel/polyfill，把es的新特性都装进来，来弥补低版本浏览器器中缺失的特性
@babel/polyfill 以全局变量的方式注入进来的。windows.Promise它会造成全局对象的污染
npm install --save @babel/polyfill
按需加载，减少冗余
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1"
},
corejs: 2,//新版本需要指定核心库版本
useBuiltIns: "usage"//按需注入
}
]
]
}
}
}
useBuiltIns 选项是 babel 7 的新功能，这个选项告诉 babel 如何配置 @babel/polyfill 。 它有三个参数可以使用： ①entry: 需要在 webpack 的入口文件里 import "@babel/polyfill" 一次。 babel 会根据你的使用情况导入垫片，没有使用的功能不会被导入相应的垫片。 ②usage: 不需要 import ，全自动检测，但是要安装 @babel/polyfill 。（试验阶段） ③false: 如果你 import
"@babel/polyfill" ，它不不会排除掉没有使用的垫片，程序体积会庞大。(不不推荐)
请注意： usage 的行行为类似 babel-transform-runtime，不会造成全局污染，因此不会对类似Array.prototype.includes() 进行 polyfill。
网友评论