update

22-前端工程化/09-构建工具.md

@@ -0,0 +1,274 @@
+
+
+## 前言
+
+Webpack所执行的环境是Node环境。
+
+
+## 项目准备
+
+（1）创建目录：
+
+
+```
+	mkdir WebpackTest
+```
+
+PS：文件夹的名字不要起关键字`webpack`，避免冲突。
+
+
+
+
+（2）初始化空的目录：
+
+```
+	npm init
+```
+
+输入上述命令后，根据提示输入 project name（**要求小写**），其他的采用默认即可，一路回车，最后输入`y`表示yes。
+
+这个命令的作用是创建一个初始化的文件`package.json`。如下图所示：
+
+
+接下来，npm才能正常地安装各种 package。
+
+（3）创建业务目录：
+
+20180309_0928.png
+
+
+
+## 文件配置
+
+### 创建配置文件 webpack.config.js
+
+`webpack.config.js`是Webpack所需要的配置文件，我们直接在项目的根目录中新建这个文件即可。
+
+接下来，我们需要对这个文件进行配置。包括如下部分：
+
+
+**基础配置**：（也是webpack必须有的配置）
+
+- entry：入口。表示webpack要构建哪个文件。
+
+- module：配置各种loader。
+
+- plugins：所依赖的插件
+
+- output：构建成功后，输出的位置。
+
+**进阶配置**：
+
+- `resolve`
+
+- `devtool`
+
+- `devServer`
+
+上面的内容，我们详细来介绍。
+
+
+### 基础配置
+
+我们在`webpack.config.js`文件里可以这样写：
+
+```javascript
+const path = require('path');
+
+module.exports = {
+  entry: {
+    app: '.app/js/main.js'  //webpack从这个文件作为入口，进行构建
+  },
+  module: {
+    loaders: [{    //告诉webpack，什么样的文件就用什么解析器
+      test: /\.html$/,   //这里用到了正则
+      loaders: `html-loader` //所有的loaders都要单独安装。稍后再说
+    },{
+      test: /\.vue$/,
+      loaders: `vue-loader`
+    },{
+      test: /\.scss/,
+      //【注意】webpack支持多个loader的串行解析，解析顺序**从右向左**。
+      //这里的解析顺序是：遇到sass文件时，先用sass loader进行处理；处理结束后，交给css loader；css loader处理结束后交给 style loader
+      loaders: `style-loader!css-loader!sass-loader`
+    }]
+  },
+  plugins: [],
+  output: {
+    filename: '[name].min.js',   //这里的`[name]`是变量，不要乱写，它是和上面的 entry 里面的 app 对应起来的。
+    path: path.resolve(__dirname, './dist') //值里面的`path`就是第一行里通过Node.js的方式引入的path。`__dirname`是环境变量，代表当前路径。
+  }
+}
+
+
+```
+
+注意上方代码的注释，写得很详细。尤其注意scss文件的解析方式。
+
+光这样写还不够，我们还要安装`module`部分所列出的各种loader：
+
+```bash
+# D 表示开发依赖
+npm i html-loader D
+
+# 一次性安装各种loader
+npm i vue-loader style-loader css-loader sass-loader -D
+```
+
+
+### 进阶配置
+
+
+**1、devServer：**
+
+我们在本地开发时，常常需要启动一个服务，这样的话，我们不再使用file协议，而是使用http协议。这里就需要用到配置文件里的`devServer`参数。
+
+我们先打开Webpack的官方文档里关于**[devServer](https://doc.webpack-china.org/configuration/dev-server/#devserver)**的部分。摘取下面的代码，直接copy到`webpack.config.js`文件里，位置和`module`并列：
+
+```javascript
+devServer: {
+  contentBase: path.join(__dirname, "dist"),
+  compress: true,
+  port: 9000
+}
+```
+
+参数解释：
+
+- `contentBase`：如果你需要提供一个静态文件，这里就配置静态文件的输出路径。
+
+- `compress`：表示整个服务要开启gzip压缩。
+
+- `port`：服务占用的端口。
+
+
+然后，如下如下命令，安装`[webpack-dev-server](https://doc.webpack-china.org/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-server)`：
+
+```
+npm install --save-dev webpack-dev-server
+```
+
+
+
+### 其他
+
+构建工具还可以帮我们把px转成rem。
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```
+
+
+
+
+