webpack定制化 加载与插件[css加载器、html插件、image打包配置、babel代码兼容、vue加载器及配置]
前提：
webpack5及其对应配套内容
node16.13.2
webpack定制化 基础配置[基础、配置、初运行]
webpack定制化 高级配置[热更新、热打包、别名、调试]
一.加载与插件
项目结构：
# 打包完成代码部署在dist；分二static与templates；static放css、img和js等等；templates专门放html
# 源代码部署在src；第一层结构为单个项目名（可为小项目，也可为完整大项目里面再细分）；单个项目当前目录放入口文件；单个项目也存放模板和视图文件夹
# 静态资源部署在public；static放css和img等等；templates专门放html
├── dist
│ ├── static
│ │ ├── css
│ │ │ └── index.css
│ │ ├── img
│ │ │ └── 27f4f737224efc87924d.png
│ │ └── js
│ │ └── ch-main.js
│ └── templates
│ └── index.html
├── node_modules
│ └── ***
├── package.json
├── package-lock.json
├── public
│ ├── static
│ │ ├── css
│ │ │ └── loser.css
│ │ └── img
│ │ └── 1.png
│ └── templates
│ └── index.html
├── src
│ └── app
│ ├── App.vue
│ ├── components
│ │ └── one.vue
│ ├── main.js
│ └── views
│ └── add.js
└── webpack.config.js
1.html打包
安装：npm i html-webpack-plugin -D #本文版本5.5.0
介绍：把html打包到指定目录，并且能够自动构建关联js文件到html
注意：如何使用webpack-dev-server需要提前准备好该插件
配置：
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 其它配置
// 插件都放 plugins 中
plugins: [
new HtmlWebpackPlugin({
// 选择模板 public/index.html
template: './public/templates/index.html',
// 打包后的名字
filename: path.resolve(__dirname, './dist/templates/index.html'),
// js文件插入 body里
inject: 'body',
}),
]
}
2.css打包
安装：npm i css-loader mini-css-extract-plugin -D #本文版本分别是6.7.1 2.6.1
-
css-loader
导入：import '../../public/static/css/loser.css'介绍：使得webpack可以打包css(默认没有这个功能)，如果单单只要这个工具，其只会加载到js里面，并不会真正生效，需要style-loader(会将内容以style的形式写入html)或mini-css-extract-plugin（单独加载css文件）
配置：
module.exports = { module: { rules: [ { test: /\.css$/, use: ['style-loader','css-loader'] } ] } } -
mini-css-extract-plugin
介绍：mini-css-extract-plugin这个插件会将css打包生成到某目录成为单独css文件注意：该插件不能用于热更新，所以将使用webpack-dev-server就需要替换为style-loader
配置：
const MiniCssExtractPlugin = require('mini-css-extract-plugin')// css单独打包到某个位置 module.exports = { // 其它配置 module: { rules: [ { test: /\.css$/, use: [MiniCssExtractPlugin.loader,'css-loader'] } ] }, // 插件都放 plugins 中 plugins: [ new MiniCssExtractPlugin({ // 将css代码输出到dist/styles文件夹下 filename: '../css/index.css',// 以webpack设置js路径为当前路径 ignoreOrder: true, // 忽视掉打包过程中出现的冲突警告 }), ] } -
style-loader
介绍：style-loader和mini-css-extract-plugin类似，只是它会将css以style的形式写入html，可以用于热加载安装：
npm i style-loader -D #本文版本是3.3.1配置：
module.exports = {
// 其它配置
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader','css-loader']
}
]
},
}
3.image打包
解释：webpack5已经继承好了loader，此处只需要配置路径之类的就行（不配置也能打包图片）
配置：
const { VueLoaderPlugin } = require('vue-loader') // 大括号必须有
module.exports = {
// 其它配置
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg|webp)$/,
type: 'asset',
generator: {
// 打包到 指定目录 文件下
filename: '../img/[name][ext][query]',//name表示文件名字为原名(可以用[contenthash]);ext表示. ;query表示请求资源的后缀(如png) // 以webpacke配置的js路径为当前路径
},
},
]
}
}
4.babel兼容
解释：可以将我们项目中的高级语法转化成比较低级的语法，此很有必要，不然低版本浏览器识别不了，把该插件最好放在生产环境，平时打包用的话可能比较耗时
安装：npm i @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime -D
- @babel/core、babel-loader：转换语法的工具
- @babel/preset-env：转换的一套现成规则，其特别强大与关键，如果你使用了它，此时Babel就会读取browserslist的配置，通过browserslist的配置来适配浏览器，使其能成功运行
- @babel/plugin-transform-runtime：转换async/await所需插件
配置：
module.exports = {
// 其它配置
module: {
rules: [
{
// 匹配js后缀文件
test: /\.js$/,
// 排除node_modules中的js
exclude: /node_modules/,
use: [
'babel-loader'
],
}
]
}
}
单独创建babel.config.js
module.exports = {
presets: [
// 配置规则
"@babel/preset-env"
],
// 配置插件
plugins: ["@babel/plugin-transform-runtime"]
}
单独创建.browserslistrc
> 0.5%
last 2 versions
//last 2 versions 表示所有浏览器兼容到最后两个版本
// > 0.5% 全球市场份额大于0.5%的浏览器
// not dead 不包括已经退出市场的浏览器（比如ie）
5.vue打包
安装：
npm i vue@2.6.14 # 需要与下面两个版本想匹配npm i vue-template-compiler@2.6.14 vue-loader@15.9.8 -D #配合vue版本；
-
vue-template-compiler
解释：需要保证与vue版本一直，无需配置 -
vue-loader
介绍：webpack用来加载vue文件的loader配置：
const { VueLoaderPlugin } = require('vue-loader') // 大括号必须有 module.exports = { // 其它配置 plugins: [ new VueLoaderPlugin() ], module: { rules: [ { test: /\.vue$/, use: 'vue-loader', } ] } }
结语：请把本系列都看完再投入开发环境，优化配置很重要