webpack4配置总结(一)

发表于 | 分类于 ，

最近学习了一下webpack，结合工作中的项目，自己搭建了一套基础的webpack脚手架@listentolife/ll-cli，已经发布到npm上。目前只有一个模板，为基础模板。支持自定义项目初始化信息。

这里也按照这个webpack项目的配置，顺便来做一下学习的总结。

项目配置的目标

整个webpack项目配置完，目标是实现一个基于webpack实现代码打包，基于vue全家桶实现业务开发的项目模板。

项目模板通过脚手架初始化后可以开箱即用，支持本地调试(基于webpack-dev-server)，支持打包测试版及正式版(基于webpack-marge)。

基础依赖

这里先把所有涉及的基础依赖，列表列出来。

打包依赖列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
"devDependencies": {
  "@babel/core": "^7.9.0", // babel核心库
  "@babel/plugin-proposal-class-properties": "^7.8.3", // 转化class类
  "@babel/plugin-proposal-decorators": "^7.8.3", // 转化装饰器
  "@babel/plugin-transform-runtime": "^7.9.0", // 使用babel的helper代码来压缩项目代码
  "@babel/preset-env": "^7.9.0", // babel预设，根据开发者的配置按需加载插件
  "@babel/runtime": "^7.9.2", // 使用@babel/plugin-transform-runtime需要安装此依赖，包含Babel模块化运行时帮助函数
  "autoprefixer": "^9.7.5", // 自动添加css前缀
  "babel-loader": "^8.1.0", // babel转译js语法的loader
  "clean-webpack-plugin": "^3.0.0", // 打包清理旧打包文件的plugin
  "copy-webpack-plugin": "^5.1.1", // 打包时复制文件的plugin
  "core-js": "^2.6.11", // js的模块化标准库，babel的底层依赖，目前这个项目使用的是core-js2
  "css-loader": "^3.4.2", // 打包css的loader
  "file-loader": "^6.0.0", // 打包文件类型的loader
  "html-webpack-plugin": "^4.0.1", // 打包html文件的plugin
  "html-webpack-tags-plugin": "^2.0.17", // 在html文件中插入js和css文件的plugin
  "mini-css-extract-plugin": "^0.9.0", // 将css单独打包成一个文件的插件，它为每个包含css的js文件都创建一个css文件。它支持css和sourceMaps的按需加载。
  "node-sass": "^4.13.1", // sass-loader的前置依赖，安装非常麻烦
  "optimize-css-assets-webpack-plugin": "^5.0.3", // 手动压缩css的plugin
  "postcss-loader": "^3.0.0", // 用js来处理css。负责把CSS解析成抽象语法树结构，在提供给其他插件处理
  "postcss-pxtorem": "^5.1.1", // 把px转为rem
  "sass-loader": "^8.0.2", // 处理sass的loader
  "style-loader": "^1.1.3", // 处理标签中style的loader
  "terser-webpack-plugin": "^2.3.5", // 手动压缩js的plugin
  "url-loader": "^4.0.0", // 处理url的loader
  "vue-loader": "^15.9.1", // 处理vue文件的loader
  "vue-style-loader": "^4.1.2", // 处理vue文件中style标签中的css的loader
  "vue-template-compiler": "^2.6.11", // 处理vue文件中模板编译
  "webpack": "^4.42.0", // 打包工具，webpack本体
  "webpack-bundle-analyzer": "^3.6.1", // 打包后分析工具
  "webpack-cli": "^3.3.11", // webpack打包命令行工具包
  "webpack-dev-server": "^3.10.3", // 开启本地服务器调试的工具
  "webpack-merge": "^4.2.2" // 合并webpack配置的工具
}

项目依赖包列表

1
2
3
4
5
6
7
8
9
"dependencies": {
  "axios": "^0.19.2", // 处理请求的工具
  "eruda": "^2.2.1", // 移动端调试工具
  "good-storage": "^1.1.1", // 处理使用storage缓存的工具
  "nprogress": "^0.2.0", // 附着在页面顶部的进度条
  "vue": "^2.6.11", // vue本体
  "vue-router": "^3.1.6", // vue路由
  "vuex": "^3.1.3" // vue的状态管理树
},

目录结构

build目录

存放webpack配置。分基础配置文件webpack.base.js，测试环境配置文件webpack.dev.js，生产环境配置文件webpack.prod.js

public目录

存放index.html文件

src目录

存放项目主业务代码：api目录存放请求相关代码；common目录存放js，字体，图片，样式公共文件；components目录存放vue组件；mixins目录存放mixins文件；router目录存放router文件；store存放vuex文件；views目录存放页面级vue组件；App.vue跟main.js是常见的文件，不做说明；

其他

.babelrc：babel配置文件
.browserslistrc：配置浏览器适配
.gitignore：配置git忽略文件或目录
.postcss.config.js：postcss配置文件
package-lock.json，package.json及README.md不做介绍了。

结尾

下一篇开始讲webpack配置。