webpack5已经出来一段时间了，编译速度和配置都有了很大改变。vue脚手架还是webpack4，不能直接升级。
于是打算用webpack5从零搭建项目流程，相信经过手动搭建过程，会对webpack构建过程及前端工程化有进一步理解。
环境前提
webpack5需要node在10.13.0以上版本，本文node环境12.22.1 npm6.14.12
搭建流程
1. 新建项目目录
安装webpack、webpack-cli和webpack-dev-server
mkdir webpack5
cd webpack5
npm init -y // 项目初始化，执行后自动生成package.json文件
npm i webpack webpack-cli webpack-dev-server -d // 三件套
2. 新建webpack.config.js
最简单的配置如下
const path=require('path');
module.exports={
mode:"development",
// 入口
entry: {
index: './src/index.js'
},
// 产出目录
output:{
filename:'[name].js',
path:path.resolve(__dirname,'./dist')
}
}
3. 修改package.json的脚本
"scripts": {
"dev": "webpack serve --config build/webpack.config.js",
},
4. 执行npm run dev
如果报错，可能是webpack-dev-server最新版本有兼容性问题，
解决方法：npm uninstall webpack-dev-server , 然后重新安装 "webpack-dev-server": "^3.11.2" 版本即可
5. 支持es6语法
对于低版本浏览器不支持es6语法，需要babel转义，安装相关依赖，新增.babelrc填写options配置文件（主要为了抽离配置）
"@babel/core": "^7.12.9",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/preset-env": "^7.12.7",
"babel-loader": "^8.2.1",
webpack.config.js继续补充babel相关配置
6. 支持vue文件
vue3版本需要安装vue、vue-loader和@vue/compiler-sfc
"@vue/compiler-sfc": "^3.0.2",
"vue-loader": "^16.0.0-rc.1",
"vue": "^3.0.2"
webpack.config.js继续补充vue相关配置
修改入口文件及新增app.vue
7. 支持样式解析
需要安装相关loader，这里我们选择less，安装如下
"css-loader": "^5.0.1",
"less": "^3.12.2",
"less-loader": "^7.1.0",
"style-loader": "^2.0.0"
8. css打包分离（生产环境）
为了充分利用浏览器缓存，css打包抽离单独处理,主要用于生产环境，需要安装插件
"mini-css-extract-plugin": "^1.3.1"
为了兼容各个版本浏览器，需要为某些css属性补全兼容性前缀，自动添加样式前缀, 需要配合.browserslistrc才生效
"postcss-loader": "^6.2.1",
"autoprefixer": "^10.4.0",
9. 实时刷新
修改代码后发现浏览器需要刷新才能更新，解决方案在webpack.config.js中增加： target: 'web'
10. 静态资源
图片、字体等静态资源引入不再需要url-loader或者file-loader，修改webpack.config.js
test: /\.(png|gif|jpg|jpeg|svg)$/,
type: 'asset/resource'
type说明如下：
-
asset/resource 将资源分割为单独的文件，并导出url，就是之前的 file-loader的功能.
-
asset/inline 将资源导出为dataURL（url(data:)）的形式，之前的 url-loader的功能.
-
asset/source 将资源导出为源码（source code）. 之前的 raw-loader 功能.
asset 自动选择导出为单独文件或者 dataURL形式（默认为8KB）. 之前有url-loader设置asset size limit 限制实现。
如果只设置asset，webpack会自动判断resource 还是 inline，如果文件尺寸小于8kb，就会被处理做inline，否则就是resource
11. 代码规范
为了统一编码规范，增加代码风格规范eslint
"eslint": "^8.4.1",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-vue": "^8.2.0",
// 如果不想手动安装，可以通过：npx eslint --init 自动安装eslint相关依赖（强烈推荐）
如果出现编码规范，手动修复代码比较麻烦，可以通过webpack插件自动修复，编译时自动处理
npm install eslint-webpack-plugin --save-dev
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
plugins: [
new ESLintPlugin({
fix: true, /* 自动帮助修复 */
extensions: ['js', 'json', 'coffee', 'vue'],
exclude: 'node_modules'
})
]
}
以上基本完成所有配置，为了更好的体验继续优化
极致优化
1. 压缩css
npm install -D css-minimizer-webpack-plugin
2. 压缩js
const TerserPlugin = require('terser-webpack-plugin');
3. 分包 splitChunks
将业务代码和第三方库分开打包，可以重复利用浏览器缓存
4. externals引入资源
将第三方不打包到bundle，降低包体积 // cdn加载资源 externalsType: 'script', externals: { myJquery: ['code.jquery.com/jquery-1.12…', 'jQuery'] }
5. 增加编译进度条
npm i -D progress-bar-webpack-plugin
6. 增加打包体积分析
npm i -D webpack-bundle-analyzer
为了区分开发环境和生产环境配置，新增build文件夹，分别创建webpack.dev.js和webpack.prod.js。配置如下：
package.json脚本也需要处理，因为webpack默认执行根目录的webpack.config.js
"dev": "webpack serve --config build/webpack.dev.js",
"build": "webpack --config build/webpack.prod.js"
以上就是webpack5搭建整体流程，相信一步步完成搭建会对webpack和前端工程化有进一步了解。
已放github可以直接运行，github地址：github.com/mengmengzp/…
