webpack5-plugin
一、意识plugin
loader: 转换 特定类型 读取文件时plugin: 可做更多的事件，在打包的流程中，交叉一些操作(清理原有打包后果、css压缩、创立html模板、定义我的项目全局变量等)应用一个常见的plugin(分内置与第三方)，清理原有打包后果：
clean-webpack-plugin下载：
yarn -D add clean-webpack-plugin在webpack.config.js中配置plugins：
const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = { ... plugins: [ new CleanWebpackPlugin() ]}/** * 插件就是一个类，相似于： * class HelloPlugin { * contructor(){} * apply(compiler) {} * } * 须要应用模块化的形式引入，而后应用new关键字创建对象，再放入plugins数组中 */二、罕用插件应用
1.html-webpack-plugin应用
性能：
用于生成html模板文件装置：
yarn -D add html-webpack-plugin 配置插件：
const HtmlWebpackPlugin = require('html-webpack-plugin');const { DefinePlugin } = require('webpack'); //用于定义我的项目全局常量plugins: [ ... new HtmlWebpackPlugin({ title: 'html-webpack-plugin', template: './public/index.html', }), new DefinePlugin({ BASE_URL: '"./"' }) ]// 未来webpack定义常量时，会间接 const BASE_URL = ./ ,会有语法错误，须要写成 const BASE_URL = '"./"'2.Babel应用
a.命令行中应用babel
为什么须要 Babel?
JSX TS ES6+ ---> 浏览器平台间接应用(配合.browserslistrc条件) 转换 Babel 相似于 postcss ，本身没有性能，只是为了转换提供平台 解决 JS 兼容罕用工具包：
转换箭头函数：@babel/plugin-transform-arrow-functions 转换变量申明：@babel/plugin-transform-block-scoping 蕴含多种转换：@babel/preset-env装置babel相干包：
yarn -D add @babel/core // 转换js的外围包(微内核)，如果须要在转换过程中批改代码，该须要配合其它插件yarn -D add @babel/cli // 为了能在命令行中间接应用babel命令行中应用babel:
npx babel src --out-dir build //文件或目录（编译该目录下所有js） 输入门路转换箭头函数：
// 装置依赖包 yarn -D add @babel/plugin-transform-arrow-functions// 命令行中应用 npx babel src --out-dir build --plugins=@babel/plugin-transform-arrow-functions转换变量申明形式(let、const ==> var)：
// 装置依赖包 yarn -D add @babel/plugin-transform-block-scoping// 命令行中应用 npx babel src --out-dir build --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping应用预设依赖包(蕴含了较多新语法的转换形式)：
// 装置依赖包 yarn -D add @babel/preset-env// 命令行中应用 npx babel src --out-dir build --presets=@babel/preset-envb.在webpack中配置babel
能够在webpack配置文件中，或.browserslistrc文件配置浏览器筛选条件
装置babel-loader
yarn -D add babel-loader配置解决js文件：
{ test: /\.js$/, use: [ { loader: 'babel-loader', options: { // 应用单个工具包聚合 // plugins:[ // '@babel/plugin-transform-arrow-functions', // '@babel/plugin-transform-block-scoping' // ]// 应用babel预设工具包 presets: ['@babel/preset-env'] // presets: [ // [ // '@babel/preset-env', // { targets: 'chrome 91' } // ] // ] } } ], }应用babel.config.js配置文件：
module.exports = { presets: ['@babel/preset-env']}/** * babel-loader 相干配置文件 * babel.config.js(json cjs mjs) 当初是多包格调，倡议应用 * bebelrc.json(js) babel 7.x之前应用的较多 * */应用配置文件后配置babel-loader时：
{ test: /\.js$/, use: ['babel-loader'], }3.polyfill的应用
性能：
polyfill 是什么？ 履行打补丁的操作旧浏览器提供它没有原生反对的较新的性能。 用原生js实现的新的语法、新的接口、新的性能的代码块。简述：
装置依赖：
yarn add core-js regenerator-runtime在main.js中引入依赖：
import 'core-js/stable';import 'regenerator-runtime/runtime';应用polyfill后的babel-loader的配置：
{ test: /\.js$/, exclude: /node_modules/, // 排除掉node_modules目录下的js文件，防止反复填充解决 use: ['babel-loader'], }应用polyfill后的babel.config.js的配置：
module.exports = { // 并不能实现所有性能的转换 presets: [ [ '@babel/preset-env', { // false:不对以后的的JS解决做 polyfill 的填充 // 'useage':根据用户源代码中所应用到的新语法进行填充 // 'entry':依据须要兼容的浏览器进行填充 useBuiltIns:'entry', corejs:3 // 指定应用的外围js版本 } ], ] }4.copy-webpack-plugin应用
性能：
局部资源文件不须要打包，只须要复制到指定目录之下装置：
yarn -D add copy-webpack-plugin应用copy-webpack-plugin插件时的配置：
const CopyWebpackPlugin = require('copy-webpack-plugin');new CopyWebpackPlugin({ patterns: [ // { // from: path.resolve(__dirname, 'public/favicon.ico'), // // to: path.resolve(__dirname, 'dist/favicon.ico'), // 拷贝到dist目录下，默认会主动拷贝到output目录下 // } { from:'public', // to:'dist', 默认到output目录下 globOptions: { ignore: ['**/index.html'] // 疏忽掉该目录下的index.html文件 } } ] })4.webpack-dev-server应用
检测源代码变动，并从新打包：
// 打包时 增加 --watch参数 "scripts": { "build": "webpack --watch" },配置到webpack.config.js中检测变动：
module.exports = { watch:true, ...}毛病：
/** * 开发模式 * - watch: true或者webpack -- watch * - live server * * 有余: * 1.批改后，所有源代码都会从新编译 * 2.每次编译胜利之后都须要进行文件读写 * 3.live server 是vscode的插件 * 4.不能实现部分更新 * * * 应用webpack-dev-server */应用webpack-dev-server:
装置：
yarn add webpack-dev-server应用打包并开启服务：js webpack serve
webpack-dev-middleware应用，其外部应用了webpack-dev-server:
流程：
装置
yarn -D add express wabpack-dev-middleware express 开启本地服务器 middleware 将打包之后的后果，交给本地服务器应用middle,配合express:
const express = require('express');const webpackDevMiddleware = require('webpack-dev-middleware');const webpack = require('webpack');const app = express();// 获取配置文件const config = require('./webpack.config.js');const compiler = webpack(config);app.use(webpackDevMiddleware(compiler,{ publicPath: config.output.publicPath}));// 开启端口上的服务app.listen(3000, () => { console.log('Server is running on http://localhost:3000');})5.HMR性能应用
模块热替换(hot module replacement)，须要配合webpack-dev-server应用开发阶段屏蔽掉.browerslistrc的影响：
module.exports = { mode: 'development', devtool: false, entry: './src/main.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', // publicPath: '/dist/', }, target: 'web', // 开发阶段屏蔽.browserslistrc devServer: { hot: true, // 开启HMR性能的 }}开启HMR性能后，默认状况下，还是刷新整个页面，须要再代码中，手动设置：
import 'core-js/stable';import 'regenerator-runtime/runtime';import './title'console.log('--main.js is running'); // 这里不会更新if(module.hot){ // 判断是否开启热更新 module.hot.accept(['./title.js'],()=>{ // 填写须要热更新的文件 console.log('title.js更新了'); }); }6.框架热更新实现
a.React_HMR
应用@babel/preset-react解析jsx文件
装置：
yarn add -D @babel/preset-react// babel-loader配置： { test: /\.jsx?$/, exclude: /node_modules/, // 排除掉node_modules目录下的js文件，防止反复填充解决 use: ['babel-loader'], }// babel.config.js配置module.exports = { presets: [ ['@babel/preset-env'], ['@babel/preset-react'], ] }应用 @pmmmwh/react-refresh-webpack-plugin与react-refresh实现React的HMR:
装置：
yarn add -D @pmmmwh/react-refresh-webpack-plugin react-refresh@pmmmwh/react-refresh-webpack-plugin // 该插件的性能是让webpack与react-refresh插件联合react-refresh 实现react的部分组件更新配置：
// webpack.config.jsconst ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')module.exports = { mode: 'development', ... target: 'web', // 开发阶段屏蔽.browserslistrc devServer: { hot: true, }, ... plugins: [ ... new ReactRefreshWebpackPlugin(), ]}// 在babel.config.js中配置实现react的HMR的插件module.exports = { presets: [ ['@babel/preset-env'], ['@babel/preset-react'], ], plugins: [ ['react-refresh/babel'], ]}b.Vue_HMR
装置vue-template-compiler(2.6)、vue-loader(15)让起能编译 .vue (vue2)文件:
yarn add -D vue-template-compiler@2.6 vue@2.6 vue-loader@15配置vue-loader：
const VueLoderPlugin = require('vue-loader/lib/plugin'); // 在15版本之前则不须要引入vue-loader插件module.exports = { mode: 'development', ... target: 'web', // 开发阶段屏蔽.browserslistrc devServer: { hot: true, }, module: { rules: [ ... { test: /\.vue$/, use: ['vue-loader'] } ] }, plugins: [ ... new VueLoderPlugin() ]}应用vue-loader后，vue默认反对hmr