#### 1. 工程化的必然性
```js
模块化：将海量的代码拆解到到不同的文件里面，可以方便的维护
性能：HTTP 请求数非常影响性能
这两个其实是有矛盾的，其中有一个将文件数变的非常的多，而另外一个却想让文件数变得很少，
其实这是 开发环境 和 线上环境 的矛盾，所以解决问题的方式就是需要两套代码，开发和发布各一套代码
开发时可以模块化，可以使用sars，和 提高我们开发效率，
当晚上上线时，我们可以将 sars 编译成 CSS ， 编译成 js,并且压缩代码合并文件
自动化处理这个过程，我们就称之为工程化。
```
#### 2. 构建
```js
开发环境跟线上环境的需求是不一样的
开发环境:（源代码）
逻辑代码按模块划分成多个文件
代码可读性好，需要注释
线上环境:（线上代码）
文件越少越好
代码越短越好
兼容不同的浏览器
源代码转化为线上代码，这一转化过程通常需要 编译，打包，压缩，优化，还有其他操作，需要一个工具自动化的帮我们完成
这些操作，而将源代码自动化的经过各种操作生成可以发布的线上代码的过程，我们就叫做构建，发展到现在构建已经是非常
成熟了，总会有各种各样的构件工具。
```
#### 3. 常见构建工具对比
```js
Grunt工具: 1.最早出现 2.文件读写 3.现在基本不使用
优点：1.基于 Node
2.上手容易
3.插件齐全
4.社区活跃
缺点：1.每次操作都是文件读写，慢
2.配置相对繁琐
Gulp工具:1.替代Grunt 2.文件流 3.比较流行
优点：1.配置简单
2.基于文件流操作，快
3.项目比较大的情况下，Gulp 一般会比 Grunt 快。
webpack工具:1.新一代工具 2.专注打包 3.目前最流行
优点：1.任何文件都可以当模块
2.打包体积更小
3.打包更快
4.默认支持 AMD，Comminjs,ES6 modules
Grunt、 Gulp、Webpack用 Node.js 写的； 目前前端使用的构建工具都是用 Node.js 写的
一开始的定位只是一个打包工具，其他构建能力相对比较弱，后来使用了很多先进的概念，针对打包做了很多优化，而且使用还很
方便，开始都是在 Gulp 的基础上，使用 Gulp-webpack 这个工具来进行打包，但随着 webpack 的流行，越来越多针对
webpack的插件出现，加上配合 npm script，，现在已经不需要依赖 Gulp 了，自成体系成为一个单独的构建工具了
```
#### 4. webpack 安装
```js
安装文档地址：https://webpack.docschina.org/guides/installation/
安装
本指南介绍了安装 webpack 的各种方法。
前提条件
在开始之前，请确保安装了 Node.js 的最新版本。使用 Node.js 最新的长期支持版本(LTS - Long Term Support)，
是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能以及/或者缺少相关 package 包。
本地安装
最新的 webpack 版本是：v4.11.0
要安装最新版本或特定版本，请运行以下命令之一：
npm install --save-dev webpack
npm install --save-dev webpack@<version>
如果你使用 webpack 4+ 版本，你还需要安装 CLI。
npm install --save-dev webpack-cli
对于大多数项目，我们建议本地安装。这可以使我们在引入破坏式变更(breaking change)的依赖时，更容易分别升级项目。
通常，webpack 通过运行一个或多个 npm scripts，会在本地 node_modules 目录中查找安装的 webpack：
"scripts": {
"start": "webpack --config webpack.config.js"
}
当你在本地安装 webpack 后，你能够从 node_modules/.bin/webpack 访问它的 bin 版本。
全局安装
以下的 NPM 安装方式，将使 webpack 在全局环境下可用：
npm install --global webpack
不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，
可能会导致构建失败。
最新体验版本
如果你热衷于使用最新版本的 webpack，你可以使用以下命令，直接从 webpack 的仓库中安装：
npm install webpack@beta
npm install webpack/webpack#<tagname/branchname>
安装这些最新体验版本时要小心！它们可能仍然包含 bug，因此不应该用于生产环境。
```
#### 5. webpack 简单使用
在 project 文件夹下新建 src 源文件，src 源文件下新建 index.js 文件及 util.js 文件；
```js
index.js 文件源码
var util = require('./util');
util.init();
console.log('index works');
```
```js
util.js 文件源码
function init() {
console.log('util works');
}
module.exports = {
init: init
}
```
同时在 project 文件夹下 新建 index.html 源文件
```js
index.html 源文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpcak 简单使用</title>
</head>
<body>
<h1 id="header">My Projext</h1>
<script src="./src/index.js"></script>
</body>
</html>
```
```js
文件都在 Sublime 工具上新建好了，打开GitBash就进行打包，
webpack ./src/index.js ./dist/main.js
webpack --mode production
查看 main.js 文件 ，webpack 就打包好了
右击 index.html 点击 open 打开文件夹打开HTML文件
F12，查看 Console ,一切都OK了
这时可能会出现报错，
这是因为 webpack 4 引入了模式（mode），它有 development、production、none 三个值，我们不指定值时，默认使用 production。
报错提示是：
warning The 'mode' option has not been set, webpack will fallback to
'production' for this value. Set 'mode' option to 'development' or
'production' to enable defaults for each environment.
我们可以把命令调整下，例如：
（开发模式添加了：--mode development）
（生产模式添加了：--mode production）
它有 development、production、none 三个值，我们不指定值时，默认使用 production(生产模式)。
$ webpack ./index.js -o build.min.js --mode development
```
#### 6. webpack 配置文件
webpack ./src/index.js ./dist/main.js
这种方式配置文件已经不适用了，项目中会有很多参数，不可能在命令行里面把所有参数都写出来
```js
删掉前面练习生成的 dist 目录，这次要求通过 Webpack 配置文件的方式打包，配置文件怎么写参照 Webpack 官方文档。
在项目增加 webpack.config.js 文件，在 webpack.config.js 文件中添加 module，rules 那段代码。
修改配置文件，指定配置入口文件为 ./src/index.js, 输出目录为 ./dist/bundle.js
命令行输入 webpack 命令，查看打包是否成功
用浏览器打开 index.html，查看控制台，看是否有2个 js 文件的 console 输出
```
```
webpack.config.js 文件
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
}
```
#### 7. webpack loader
```js
$
安装css-loader命令： npm i css-loader --save-dev
后缀--save-dev 是修改 文件：package.json 里面添加 devDependencies 这个字段，是告诉其他开发者知道安装这些包才能使用
还需要安装：npm i style-loader --save-dev 才能使用
可查看官网文档https://webpack.docschina.org/guides/asset-management/#%E5%8A%A0%E8%BD%BD-css
```
#### 8. webpack plugin
```js
loader 针对不同类型单文件进行处理
plugin loader 无法实现的其他事,
压缩js
压缩图片
单独分离出css文件
......
```
#### 9. [资料] webpack html 模板插件
```js
Webpack html 模板
前面介绍的例子中我们已经将 js，css 打包并压缩到 ./dist 目录下了，但是项目的 index.html 还是在根目录下，而且页面引用打包后的 js 的路径也是我们手动加上去的。而实际项目中我们希望把 html 文件也加入构建中，并且自动将打包后的 js 加到 html 中，甚至可以使用不同的模板自动生成 html 文件，在 Webpack 里面需要 html-webpack-plugin 插件来实现。
html-webpack-plugin 是 Webpack 的插件，可以用于自动生成 html 文件或者复制 html 文件并且将打包后的 js 加入到 html 中。
在前面练习的项目基础上，我们要用这个插件将项目中的 index.html 复制到 dist 目录中，下面是具体操作步骤。
首先将 index.html 放到 src 目录，并且删掉 script 标签。
命令行输入 npm install html-webpack-plugin --save-dev 安装插件
修改构建文件，在 plugins 数组中加入该插件的任务，修改后的 webpack.config.js 内容如下：
var path = require('path');
var webpack = require('webpack')
var UglifyJSPlugin = webpack.optimize.UglifyJsPlugin;
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist')
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},
plugins: [
new UglifyJSPlugin(),
// 加入 html 模板任务
new HtmlWebpackPlugin({
// 模板文件
template: 'src/index.html',
// 打包后文件名称，会自动放到 output 指定的 dist 目录
filename: 'index.html'
})
]
}
经过上面修改，现在我们项目的 index.html 也加入构建了。
到目前为止，我们所有的 html, css, js 文件源代码都放到 src 目录， 而打包后的文件都放到 dist 目录。这样，我们开发的时候，就只需要关注 src 目录的代码，而发布的时候，只需要将 dist 目录下的文件放到服务器就可以了，这也是我们现在前端工程化通常的做法。
另外，将所有文件加入构建还有个好处就是当我们用到下一节说到的开启本地调试服务器时，构建可以检测到所有源文件的变化，并将所有打包后的文件放到本地开启的服务器中，这样我们修改的代码都可以在本地服务器中看到效果。
```
#### 10. webpack 自动刷新
```js
本地开发流程: 保存代码 ==> 跑构建 ==> 刷新浏览器 ----这样太麻烦了，
使用自动化， webpack-dev-server
全局安装：npm i webpack-dev-server -g
本地安装命令:npm install webpack-dev-server --save-dev
安装完成后查看版本：webpack-dev-server -v
Webpack 本地调试服务器
要在本地服务器中调试 html 文件，需要用到前面拓展说到的 html-webpack-plugin, 所以第一步需要先设置好 html 模板插件配置，
然后开启本地服务器，尝试本地修改代码，试下页面会不会自动刷新，修改的代码会不会生效
操作步骤:
按前面拓展介绍，将 index.html 移到 src 目录，并且配置好 html 模板插件配置
全局安装 webpack-dev-server
命令行运行 webpack-dev-server --open，在自动打开的页面中查看效果
分别修改 src 目录下的 html，css，js 文件并按保存，看下页面会不会自动刷新
注意，启动 webpcak-dev-server 后，webpack 编译不会在 dist 目录下生成本地文件，而是在保存在内存中。这会导致压缩
插件 UglifyJsPlugin 找不到本地文件而报错，所以 在运行 webpcak-dev-server 前要把 UglifyJsPlugin 的配置去掉。
在实际生产环境中，这2个功能其实也不冲突，因为一般我们使用 webpcak-dev-server 是在本地开发环境中，是不需要压缩的，而我们
需要使用 UglifyJsPlugin 插件进行压缩后再发布的时候，我们是不需要跑 webpcak-dev-server 的。通常实际项目中开发和发布使用
的是不同的 webpack 配置，分别完成不同的功能，具体可以通过 NODE_ENV 参数进行区分，感兴趣的可以自行了解下。
```
官方文档：https://webpack.js.org/configuration/dev-server/#devserver
```js
解析
操作步骤：
参照前面的拓展配置好 html 模板，记得将 index.html 放到 src 目录
命令行输入 npm i -g webpack-dev-server 安装本地调试工具
命令行运行 webpack-dev-server --open，可以看到自动打开浏览器，页面打开的就是我们的编写的页面，保存代码后可以看到构建自动运行，并且浏览器自动刷新。
这里只是 webpack-dev-server 的简单使用，更多用法可以查看官方文档。
通过开启本地调试服务器，我们修改代码之后就不需要每次得去做跑构建，刷新浏览器这些事情，把重复的工作通过工具实现自动化，这样我们才可以更好地专注于业务逻辑开发本身。
```
- Part 0：开启你的Web前端之旅
- 学习大纲
- Part 1：HTML 基础
- 认识HTML
- HTML元素
- 专业级开发环境
- 嵌套及HTML树
- Part 2：CSS 基础
- CSS 盒子
- CSS 基础
- 锻造利器——编辑器
- 属性和值
- 选择器
- 样式计算
- Part 3：HTML CSS
- CSS动画
- CSS布局
- CSS预处理
- 响应式
- Part 4：JS 基础
- BOM
- DOM
- JavaScript 语言基础
- jQuery 简单教程
- 流程控制
- 事件
- Part 5：JS 进阶
- Canvas进阶
- canvas入门
- 创建对象
- 继承
- Part 6：性能与工程
- nodejs简介
- 工程化
- 浏览器渲染简述
- 模块化
- 性能
- 网络通路简介
- Part 7：JS 应用开发
- Ajax
- React
- 设计模式
- 正则表达式
- Part 8：项目中的测试
- Jest
- 基本概念
- Part 9：安全攻防战
- Cookie
- CSRF
- XSS
- 更多安全
- Part 10：面经大放送
- 面试经验