前端工具配置（webpack 4、vue-cli 3）

　随着前端项目复杂度的增加，其所依赖的资源也越来越多，从最初的HTML文件，CSS文件，JS文件发展到现在的各种预处理文件，模板文件等等。文件多了，项目大了，项目的维护就变得更加困难了，用户加载页面的速度也变得更慢了。在这样的背景下，webpack 应运而生，webpack 的主要作用是资源的整合，打包，压缩。使用 webpack，它会自动构建一个项目资源之间的依赖关系图，其中包含项目需要的所有模块，然后把这些资源全部整合打包成一个或多个（根据需要）bundle（包）。

　　

一　　准备工作

 

　　1，安装 nodejs

　　在使用 webpack 之前，我们需要做一些准备工作。由于 webpack 工具是基于 nodejs 开发的，所以我们应该首先在电脑上安装它。

　　nodejs 下载地址：https://nodejs.org/en/；根据自己的操作系统下载安装即可。

　　装好后它会在你的电脑上创建一个系统命令：node。使用如下命令可以常看当前安装的 node 版本号，如果能正常查看，那么你的 nodejs 就已经安装成功了。

1 node -v

　　

　　2，npm 

　　通常情况下，安装 nodejs 会自动安装 npm 工具。npm 工具可以理解成一个平台，安装好后它会在你的电脑上创建一个系统命令：npm。这个工具的主要作用是：在命令行模式下，使用该命令从NPM服务器下载一些包（各种框架等）。

　　同样的，使用命令 npm -v 也可以查看当前安装的 npm 工具版本号。如果查到了，那么证明这个工具也安装成功了。

　　npm有下面一些常用的命令（在项目目录下使用）：　　

1 npm init

　　初始化项目，执行该命令后会有很多配置项，可以根据需要填写，也可以在命令后面添加 -y 参数，使用默认配置。初始化完成后，项目目录下会多一个 package.json 文件，这个文件记录了该项目的所有配置信息，如果你不想使用默认的配置了，那么你随时可以到这里来修改相关项。　

1 npm install

　　根据 package.json 配置文件，自动配置项目，并加载项目依赖的包。　　

1 npm install 'bundle'

　　安装(下载)你需要的包。比如你需要使用jQuery，你可以使用如下命令：npm install jquery。默认该命令会安装最新版的包，你也可以通过 @ 符号指定版本，比如：npm install jquery@1.12.4。包安装完成后，项目目录下又会多一个node_modules 的目录，这个目录中存放的就是你安装的所有包。　　

1 npm uninstall ‘bundle’

　　移除已安装的包。

1 npm list

　　查看项目安装了哪些包。

1 npm info ‘bundle’

　　查看包的详情。

　　使用npm命令安装包时，有以下一些可选参数：

　　　　-S 或 --save：包作用于生产环境。

　　　　-D 或 --save-dev：包作用于生产环境和开发环境（常用）。

　　　　-g 或 --global：全局安装。

　　如果不带参数 -g 则默认本地安装，即安装在当前项目下。如果使用了全局安装。你可以使用npm root -g 查看全局安装的目录位置。

　　小技巧：npm默认下载服务器是国外的，有时候速度难免有点慢，这时你可以使用淘宝在国内的镜像平台，有两种方式实现：第一种，安装cpmn，npm install cnpm -g。第二种，修改默认下载路径，npm config set registry https://registry.npm.taobao.org。

　　

　　3，自定义命令

　　package.json 文件中有一个 scripts 选项，该选项用于自定义 npm 命令，比如稍后我们要讲到的 webpack 命令：

1 "scripts":{
2     "bundle":'webpack'
3 }
4 //现在你可以使用 bundle 命令来替代 webpack 了

　　自定义命令的使用方式和原始命令有所区别：

1 npm run bundle
2 #通过 npm run 来启动自定义命令

 

 

二　　webpack

　　

　　1，安装

　　知道了怎么通过 npm 安装包，那么接下来我们就要学习如何安装 webpack 了，其实也很简单，直接使用命令：

1 npm install webpack -g

　　通常 webpack 使用全局安装，即使用参数 -g 。安装成功后可以通过如下命令查看当前安装的 webpack 版本号：

1 webpack -v

　　但有时候我们还是希望为某项目单独使用特定版本的 webpack 工具，这时你可以选择本地安装，即不指定参数 -g，它会被安装到 node_modules 目录下 。但本地安装会有一个问题：webpack 命令不能正常使用了。幸好，nodejs 为我们提供了 npx 命令，以在不修改全局目录的情况下使用 webpack 命令。

1 npx webpack -v

　　

　　2，简单使用

　　webpack 工具安装成功后，你就可以使用 webpack 命令对项目文件进行打包处理了，命令使用方式也很简单：

1 webpack ‘url被打包文件’

 　　文件打包成功后默认会在项目中新建一个目录 dist，里面会有一个和被打包文件同名的文件，这就是打包之后生成的了。

　　

　　3，配置文件

　　如果希望使用更多 webpack 提供的功能，你需要使用配置文件 webpack.config.js。该文件向外暴露一个对象，供 nodejs 使用，nodejs 根据这个配置对象来决定如何打包文件。

　　配置文件有四个核心，他们分别是：入口（entry）、输出（output）、加载器（loader）、插件（plugins）。文件的基本结构如下：

1 module.exports = { //node 语法，向外暴露一个对象
2     entry: '',
3     output:{},
4     module:{
5         rules:[]
6     },
7     plugins:[]
8 };

 　　entry 规定 webpack 从哪里开始打包，并构建内部依赖关系图。它的值是一个相对路径，一般指向一个具体的文件。比如当前项目目录下的 main.js：

1 entry: './main.js'

　　output 则是规定 webpack 输出内容的配置对象，通常它需要两个属性：filename（输出文件的名称）和 path（输出路径）：

1 const path = require('path');//node 的一个 path 模块
2 module.exports = {
3      output:{
4         filename:'main.bundle.js',
5         path:path.resolve('__dirname','dist')
6         //通过 path 模块的 resolve 方法，在项目根目录下生成一个 dist 目录，这也是 node 的语法，有兴趣的可以去学习 node，这里只是介绍 webpack，所以不深究
7     }
8 }

 　　module 用于指定 loader。由于 webpack 只认识 JS 文件，当碰到项目中需要打包其他文件，比如 CSS 文件，图片，txt 文件或者其他编程语言文件等等，这时候就需要用到 loader了。loader 用于对模块的源代码进行转换，以便浏览器最终能够认识他们。

1 module: {
2     rules: [
3         { test: /\.css$/, use: 'css-loader' },
4         { test: /\.ts$/, use: 'ts-loader' }
5     ]
6 }
7 //每条规则通过 test 来判断打包的是什么类型的文件，如果匹配成功，将使用本规则 use 所指定的 loader。

　　事实上，每条规则可以使用多个 loader，这时 use 需要用数组来保存它们。每个 loader 都有不容的作用，也有一些不尽相同的可选项，如果需要，请查看 webpack 官方文档  LOADER。

　　plugins 用于配置 webpack 插件，这些插件可以在打包的不同阶段完成一些功能。比如 HtmlWebpackPlugin 插件，它的作用是在打包完成后，在输出目录自动生成一个 HTML 文件，并把打包好的文件引入该 HTML 文件中，下面是它的用法：

1 var HtmlWebpackPlugin = require('html-webpack-plugin');
2 var webpackConfig = {
3   plugins: [new HtmlWebpackPlugin({
4     filename:'index.html',
5     template:'src/test.html' 
6   })]
7 };

　　先在配置文件中引入插件，然后在 plugins 中创建插件实例，创建实例的时候可以给一个配置对象，指定生成的文件名称，和使用什么样的 HTML 模板等。

　　注意：loader 和 plugin 都需要使用 npm 先安装到本地才能如上述方式使用。

　　

　　4，常用 loader 介绍

　　在一般项目中，最常用的 loader 包括 url-loader 和 （style-loader & css-loader）。前者用于图片打包，后者用于样式打包。

　　url-lorder 用法如下：

 1 module:{
 2     rules:[
 3         test:/\.(jpg|png|gif)$/, //正则用于匹配图片资源
 4         use:{
 5             loader:'url-loader',
 6             options:{
 7                 name:'[name].[ext]', //占位符用于指定图片的名称和后缀名
 8                 limit:2048, //规定图片大于2048字节则打包到指定目录（下面的outputPath），否则以Base64编码形式直接打包到输出 js 文件中
 9                 outputPath:'images/' //单独指定图片文件指定输出路径
10             }
11         }
12     ]
13 }

　　样式 loader 用法：

 1 module:{
 2     rules:{
 3         test:/\.scss$/,
 4         use:[
 5             'style-loader', // 通过<style>标签向HTML文档注入css样式
 6             'css-loader', // 解析合并css样式文件
 7             'sass-loader' // 解析scss样式文件，如果是其他类型的则需要安装其他loader
 8         ]
 9     }
10 }

 　　需要注意的是：使用多个 loader 解析时，webpack 调用顺序是从后到前。比如上例中的样式 loader，先使用 sass-loader 把 .scss 文件解析成标准 css 样式，再调用 css-loader 检查是否有多个 css文件，如果有，则将他们合并成一个，最后调用 style-loader 把这些代码通过 <style> 标签注入到 HTML 文档中。

　　如果你不想用内联方式引入 CSS 样式，那么你可以使用 <link> 标签的方式：

1 import url from 'file.css'

 1 module: {
 2     rules: [
 3       {
 4         test: /\.css$/,
 5         use: [
 6           { loader: "style-loader/url" },
 7           { loader: "file-loader" }
 8         ]
 9       }
10     ]
11   }

　　这种方式最终将会在页面中通过标签 <link rel="stylesheet" href="path/to/file.css"> 向页面引入样式。

　　

　　4，动态监听打包文件

　　默认情况下，所有源文件的修改都需要重新运行 webpack 打包命令，这简直太麻烦了。这时你需要动态的监听所有需要被打包的文件，这样，每当我们修改了源文件，webpack 都会自动的把它们重新打包到输出文件。实现方式也很简单：

1 module.exports = {
2     watch:true //默认值是 false，不开启
3 }

　　另一种方式是在运行 webpack 命令时添加 --watch 参数：

1 webpack --watch

　　动态监听固然不错，但还是有些不尽人意，比如每次都要手动刷新页面才能看到修改后的效果；不方便在服务器运行页面，像 ajax 请求等都不方便测试。

　　webpack 提供了 devServer 配置项，可以在打包后在内存中配置一个临时服务器，并把打包后的项目运行在该服务器上。devServer 最强大的地方在于，它把输出目录也保存在内存中，这大大提高了其打包的效率。

1 module.exports = {
2     devServer:{
3         contentBase:'./dist', //指定服务器目录
4         open:true //打包完成后立即在浏览器运行
5     }
6 }
7 //打包完成后默认运行在本地路径8080端口，打包的时候别忘啦把 webpack 命令替换成 webpack-dev-server 哦

　　devServer 还有很多其他的配置项，你可以在需要的时候查阅 webpack 官网，根据需要配置你需要的选项。( 其实现在很多IDE开发工具都内置了相似的功能，根据需要选择就可以了。)

 

　　5，bable 处理 ES6 语法

　　如果你在源代码中使用了 ES6 的语法，可能很多老版本的浏览器并不能正确的执行。这时候你就需要 bable 来帮忙了，bable 是一款 JavaScript 编译器，它的主要功能就是语法转换，即把高版本的语法转换成低版本的语法，用低版本的特性实现高版本的新特性。

　　在使用结合 webpack 使用 bable 之前，我们应该先安装一些相关的包：

1 npm install --save-dev babel-loader @babel/core
2 # babel-loader用于连接webpack和bable，@babel/core是一个bable的核心库，用于辅助语法转换
3 npm install @babel/preset-env --save-dev
4 # @bable/preset-env 实际负责语法转换
5 npm install --save @babel/polyfill
6 # @bable/polyfill 用于注入ES6 的一些新特性

　　webpack 中的配置：

 1 module: {
 2     rules: [
 3         {
 4            test: /\.js$/,
 5            exclude: /node_modules/, //排除node_modules中的文件
 6            loader: "babel-loader",
 7            options:{
 8               presets:[
 9                  ["@babel/preset-env"], //负责实际的编译工作
10                  {
11                      targets:{edge:"17",firefox:"60",chrom:"67",safari:"11"}, //设置运行环境浏览器版本临界值，高于（包含）此版本将不使用 bable 编译
12                      useBuiltIns:"usage" //检测源代码，仅注入使用到的ES6新特性
13                  }
14               ]
15            }
16         }
17     ]
18 }

　　源代码中：

1 import "@bable/polyfill"
2 // some code

 　　关于 webpack 常用的配置就先介绍到这里了，事实上，webpack 还有许多其他的配置项，要全部记住是不太现实的，通常我么建议了解即可，当我们需要某些功能时，知道怎么去查询配置详情即可。

 

三　　Vue-CLI

　　Vue-CLI 是基于 webpack 封装而成的脚手架工具，专门用于 Vue 项目的管理，Vue-CLI 封装了许多 webpack 的配置项，让我们只需简单的几步就能实现 webpack 复杂的功能配置。Vue-CLI 极大的简化了项目打包的配置，让我们可以专注于项目本身，而不用过多的操心打包的事情。 

　　

　　1，安装

1 npm install -g @vue/cli

　　

　　2，创建项目

1 vue create "项目名称"

　　执行创建命令后，如果选择默认设置，将不需要人工干预，直接会成生一个项目的基本目录。如果选择手动设置，则需要人工干预，提供必要的信息。

　　默认设置中，Vue-CLI 会自动加载 Vue 项目需要的一些必要的包，后期可以根据需要再手动安装其他的包就行了。Vue-CLI 默认提供了两个命令：

1 npm run serve
2 #打包到内存并在虚拟服务器启动项目，实际使用了 webpack 的 devServer 配置项
3 npm run build
4 #打包项目

 　　基本的项目目录包括：

名称	类型	说明
node_modules	目录	存放包
public	目录	存放公共资源
src	目录	存放源代码
babel.config.js	文件	引入babel插件
package.json	文件	项目详情
package-lock.json	文件	包详情
readme.md	文件	自述文件
.gitignore	文件	git提交配置

　　当你运行了打包命令，默认还会创建一个 dist 目录，部署项目时直接拷贝这个目录到实际生产环境即可。

　　小技巧：Vue-CLI 打包的文件被认为将直接在服务器运行，所以如果你使用 file 协议运行 dist 下的文件，将不会成功，Vue-CLI 官方推荐全局安装 http-server （nodejs 静态文件服务器）（npm install serve -g；serve dist -s）或手动修改 publicPath 配置项为相对路径，以对打包文件进行测试，我建议自己在本机搭建一个 web 服务器来测试，这样能更加贴近生产环境。

 

　　3，配置文件

　　默认情况下使用 Vue-CLI 创建的项目，不会包含配置文件，这是因为该脚手架工具的设计理念是尽量简化打包相关的配置和操作，并且它已经封装了常用的配置项，不需要我们额外再配置。如果你需要手动配置，你可以在项目根目录下新建一个 vue.config.js 的配置文件，Vue-CLI 提供的配置项请点这里查阅官网，这里不一一举例了。

　　如果确实遇到其封装的配置不能满足我们实际需要，Vue-CLI 也提供了一个 configureWebpack 这个配置选项，其值可以是一个对象或一个函数，如果你为其设置了一个对象，那么你可以在这个对象中添加原生的 webpack 配置项。不过，Vue-CLI 建议，尽量不要在 configureWebpack 中配置已经封装的选项，这样做是因为 vue.config.js 中的值会被用在配置里的多个地方，以确保所有的部分都能正常工作在一起。

　　

　　4，图形界面

　　Vue-CLI 不仅提供了常规的命令行界面，还提供了图形化操作界面，这真的是把它的理念贯彻到了极致。

1 vue ui
2 # 安装好 vue-cli 后，直接使用此命令就可以打开图形化界面了

　　图形化界面我们一般戏称是傻瓜式配置，只需要根据提示，用鼠标点击开启或是关闭一些配置选项就行了，很少需要自己输入什么内容或命令，所以这里就不多讲了，有兴趣的朋友可以自己试一下。

　　

　　写在最后：工具会用就行了（除非你是制造工具的人），工作当中的重心依然是业务，遇到工具方面的问题查阅文档就可以了，毕竟互联网发展的那么快，但人的精力始终是有限的！如果内容有误，欢迎指正！

如果觉得内容对你有用，感谢你的推荐和收藏哦！