开篇
前段时间，看到群里一些小伙伴面试的时候被面试官问到这类题目。平时大家开发vue项目的时候，相信大部分人都是使用 vue-cli脚手架生成的项目架构，然后
npm run install 安装依赖，npm run serve启动项目然后就开始写业务代码了。
但是对项目里的webpack封装和配置了解的不清楚，容易导致出问题不知如何解决，或者不会通过webpack去扩展新功能。
该篇文章主要是想告诉小伙伴们，如何一步一步的通过 webpack4来搭建自己的vue开发环境
首先我们要知道 vue-cli生成的项目，帮我们配置好了哪些功能？
ES6代码转换成ES5代码scss/sass/less/stylus转css.vue文件转换成js文件- 使用
jpg、png，font等资源文件 - 自动添加css各浏览器产商的前缀
- 代码热更新
- 资源预加载
- 每次构建代码清除之前生成的代码
- 定义环境变量
- 区分开发环境打包跟生产环境打包
- ....
1. 搭建 webpack 基本环境
该篇文章并不会细讲 webpack 是什么东西，如果还不是很清楚的话，可以先去看看 webpack官网
简单的说，webpack是一个模块打包机，可以分析你的项目依赖的模块以及一些浏览器不能直接运行的语言jsx、vue等转换成 js、css文件等，供浏览器使用。
1.1 初始化项目
在命令行中执行 npm init 然后一路回车就行了，主要是生成一些项目基本信息。最后会生成一个 package.json 文件
npm init1.2 安装webpack
1.3 写点小代码测试一下webpack是否安装成功了
新建一个src文件夹，然后再建一个main.js文件
// src/main.js
console.log('hello webpack')然后在 package.json 下面加一个脚本命令
然后运行该命令
npm run serve如果在 dist 目录下生成了一个main.js文件，则表示webpack工作正常
2. 开始配置功能
- 新建一个
build文件夹，用来存放webpack配置相关的文件 - 在
build文件夹下新建一个webpack.config.js，配置webpack的基本配置 - 修改
webpack.config.js配置
- 修改
package.json文件，将之前添加的serve修改为
"serve": "webpack ./src/main.js --config ./build/webpack.config.js"2.1 配置 ES6/7/8 转 ES5代码
- 安装相关依赖
npm install babel-loader @babel/core @babel/preset-env- 修改
webpack.config.js配置
- 在项目根目录添加一个
babel.config.js文件
- 然后执行
npm run serve命令，可以看到 ES6代码被转成了ES5代码了
2.1.1 ES6/7/8 Api 转es5
babel-loader只会将 ES6/7/8语法转换为ES5语法，但是对新api并不会转换。
我们可以通过 babel-polyfill 对一些不支持新语法的客户端提供新语法的实现
- 安装
npm install @babel/polyfill- 修改
webpack.config.js配置
在 entry 中添加 @babel-polyfill
2.1.2 按需引入polyfill
2.1.2 和 2.1.1 只需要配置一个就行
修改时间 2019-05-05、 来自评论区 兮漫天 的提醒
- 安装相关依赖
npm install core-js@2 @babel/runtime-corejs2 -S- 修改 babel-config.js
配置了按需引入 polyfill 后，用到es6以上的函数，babel会自动导入相关的polyfill，这样能大大减少 打包编译后的体积
2.2 配置 scss 转 css
在没配置 css 相关的 loader 时，引入scss、css相关文件打包的话，会报错
- 安装相关依赖
npm install sass-loader dart-sass css-loader style-loader -Dsass-loader, dart-sass主要是将 scss/sass 语法转为css
css-loader主要是解析 css 文件
style-loader 主要是将 css 解析到 html页面 的 style 上
- 修改
webpack.config.js配置
2.3 配置 postcss 实现自动添加css3前缀
- 安装相关依赖
npm install postcss-loader autoprefixer -D- 修改
webpack.config.js配置
- 在项目根目录下新建一个
postcss.config.js
2.3 使用 html-webpack-plugin来创建html页面
使用 html-webpack-plugin来创建html页面，并自动引入打包生成的js文件
- 安装依赖
npm install html-webpack-plugin -D- 新建一个 public/index.html 页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app"></div>
</body>
</html>- 修改
webpack-config.js配置
2.4 配置 devServer 热更新功能
通过代码的热更新功能，我们可以实现不刷新页面的情况下，更新我们的页面
- 安装依赖
npm install webpack-dev-server -D- 修改
webpack.config.js配置
通过配置 devServer 和 HotModuleReplacementPlugin 插件来实现热更新
2.5 配置 webpack 打包 图片、媒体、字体等文件
- 安装依赖
npm install file-loader url-loader -Dfile-loader 解析文件url，并将文件复制到输出的目录中
url-loader 功能与 file-loader 类似，如果文件小于限制的大小。则会返回 base64 编码，否则使用 file-loader 将文件复制到输出的目录中
- 修改
webpack-config.js配置
添加rules配置，分别对 图片，媒体，字体文件进行配置
// build/webpack