webpack定制化 加载与插件[css加载器、html插件、image打包配置、babel代码兼容、vue加载器及配置、UI组件自动导入插件]

前提：
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打包

安装：

1. npm i vue@2.6.14 # 需要与下面两个版本想匹配
2. 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',
        }
      ]
    }
  }
  

6.UI组件自动导入

安装：npm install -D unplugin-vue-components unplugin-auto-import

解释：支持Ant Design Vue 、 Element Plus 、 Element UI 、 Prime Vue 、 Vant 、 View UI 、 Vuetify等组件自动模块化导入

配置：

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

结语：请把本系列都看完再投入开发环境，优化配置很重要