magicool
diff --git a/‎Cute-Webpack/introduction/README.md‎
Lines changed: 65 additions & 44 deletions b/‎Cute-Webpack/introduction/README.md‎
Lines changed: 65 additions & 44 deletions
@@ -2,9 +2,16 @@
 
 ![webpack_bg](http://images.pingan8787.com/webpack_bg.png)
 
-最近为了帮助公司新人入门 `Webpack4`，于是我整理了这么一份**入门手册**，这里也一起分享给需要的小伙伴啦~
+## 介绍
 
-感觉现在的前端开发，已经基本上离不开 `Webpack` 霸霸了，并且在 `Webpack4` 以后，有些插件变化特别大，使用方式也改变很大，实在容易掉坑。
+### 1. 背景
+
+最近和部门老大，一起在研究团队【EFT - 前端新手村】的建设，目的在于：**帮助新人快速了解和融入公司团队**，**帮助零基础新人学习和入门前端开发**并且**达到公司业务开发水平**。
+
+本文也是属于【EFT - 前端新手村】的一部分，用来帮助新人快速入门 `Webpack4`，内容偏基础，当然也可以作为复习材料~~这里分享给各位小伙伴啦！
+
+
+### 2. 文章概要
 
 由于本文篇幅较长，将分为《**Webpack4入门手册（上）（共 18 章）**》和《**Webpack4入门手册（下）（共 18 章）**》两篇文章发布，请联系起来看~
 
@@ -15,22 +22,21 @@
 > 《Webpack4 的四个核心概念》
 > https://github.com/pingan8787/Leo-JavaScript/blob/master/Cute-Webpack/guide/README.md
 
+### 3. 教程目录
 
-## 一、 快速入门 demo
+![教程目录](http://images.pingan8787.com/Webpack4%E5%85%A5%E9%97%A8%E6%89%8B%E5%86%8C.png)
 
-### 1. 项目初始化
+## 一、 项目初始化
 
-新建文件夹 `leo`:
-```sh
-mkdir leo
-```
+### 1. 初始化 demo
 
-进入文件夹 `cd leo`:
+新建并进入文件夹 `leo`:
 ```sh
+mkdir leo
 cd leo
 ```
 
-然后本地安装 `webpack` 和 `webpack-cli` （在 Webpack 4.0以后需要单独安装）：
+然后本地安装 `webpack` 和 `webpack-cli` （**在 Webpack 4.0以后需要单独安装**）：
 
 ```sh
 npm install webpack webpack-cli --save-dev
@@ -102,7 +108,7 @@ Entrypoint main = main.js
     + 1 hidden module
 ```
 
-打包成功后，会保存在 `dist` 目录中。
+打包成功后，生成的文件会保存在 `dist` 目录中。
 
 现在在 `dist/index.html` 中引入打包后的 `main.js`，打开浏览器测试：
 
@@ -129,16 +135,6 @@ Entrypoint main = main.js
   ├─webpack.config.js  // webpack的配置文件
 ```
 
-并在 `index.css` 文件给我们新建的 `div` 元素添加 `class` ：
-
-```css
-// src/style/index.css
-
-.box{
-    color: red;
-}
-```
-
 接着在 `index.js` 的新建元素方法中，添加 `class` 为 `box`，这样新建的元素就带有 `box` 的 `class` 属性：
 
 ```diff
@@ -156,6 +152,17 @@ function createElement(){
 document.body.appendChild(createElement());
 ```
 
+然后在 `index.css` 文件为 `box` ：
+
+```css
+// src/style/index.css
+
+.box{
+    color: red;
+}
+```
+
+
 **注意：**
 
 这里使用 `import './style/index.css';` 引入我们的样式文件，是没办法解析使用，这时我们需要在 `webpack` 中使用到第三方 `loader` 插件，这里我们使用：   
@@ -186,7 +193,10 @@ module: {
 }
 ```
 
-这段代码中，`test` 的值表示**需要匹配的模块后缀名**，`use` 则表示对应**处理的 loader 插件名称**（处理顺序是从右往左）。
+参数介绍：
+
+`test`：**需要匹配的模块后缀名**；
+`use`：对应**处理的 loader 插件名称**（处理顺序是从右往左）。
 
 ### 3. 打包测试
 
@@ -206,21 +216,21 @@ Entrypoint main = main.js
     + 3 hidden modules
 ```
 
-然后打开 `index.html` 可以看见，文本样式已经变成红色，并且 `css` 代码已经添加到 `<style>` 标签上。
+这时候可以看见 `index.html` 中，文本已经变成红色，并且 `css` 代码已经添加到 `<style>` 标签上。
 
 ![webpack01](http://images.pingan8787.com/webpack01.png)
 
 ## 三、 webpack 模块介绍和处理 sass
 
-在这一节中，我们会介绍 `weboack` 中关于模块的一些概念，并且会介绍在上一节基础上，如何去处理 `sass` 文件。
+在这一节中，我们会介绍 `webpack` 中的模块，并且介绍如何去处理 `sass` 文件。
 
 ### 1. webpack 模块介绍
 
 这里介绍的模块（module）是指 `webpack.config.js` 文件中的 `module` 配置，它决定了如何处理项目中的不同类型模块。
 
 比如上一节介绍的，使用 `style-loader` 、 ` css-loader` 两个插件去处理 `css` 文件。   
 
-webpack 模块支持如下语句：
+`webpack` 模块支持如下语句：
 
 * ES2015 `import` 语句；
 * CommonJS `require()` 语句；
@@ -230,15 +240,16 @@ webpack 模块支持如下语句：
 
 这里建议使用 `ES2015` 的引入方法，毕竟这是标准。
 
-另外，所有的 [webpack 配置选项](https://www.webpackjs.com/configuration/) 可以在中文官网查看，我们入门只学习常用模块。
+> 更多参数介绍，可访问中文官网的介绍:   
+> [《webpack 配置选项》](https://www.webpackjs.com/configuration/) https://www.webpackjs.com/configuration/
 
 ### 2. 常用模块 
 
 #### 2.1 module.noParse
 
 值的类型：`RegExp | [RegExp] | function`
 
-防止 webpack 解析那些符合匹配条件的文件，忽略的文件夹中不应该含有 `import`、`require`、`define`的调用，或任何其他导入机制，忽略的 library 可以提高构建效率。
+防止 `webpack` 解析那些符合匹配条件的文件，忽略的文件夹中不应该含有 `import`、`require`、`define`的调用，或任何其他导入机制，忽略的 `library` 可以**提高构建效率**。
 
 ```js
 // webpack.config.js
@@ -329,7 +340,7 @@ import './style/leo.scss';
 ![webpack03](http://images.pingan8787.com/webpack03.png)
 
 
-### 4. 小技巧
+### 4. 添加快捷打包命令
 
 像 `npx webpack` 这个命令我们需要经常使用，对于这种命令，我们可以把它写成命令，方便每次使用。
 
@@ -341,8 +352,7 @@ import './style/leo.scss';
 },
 ```
 
-这里的 `-c webpack.config.js` 中，`-c` 后面跟着的是 `webpack` 配置文件，默认可以不写。  
-
+这里的 `-c webpack.config.js` 中，`-c` 后面跟着的是 `webpack` 配置文件的文件名，默认可以不写。  
 
 
 ## 四、 webpack 开启 SourceMap 和添加 CSS3 前缀
@@ -374,7 +384,7 @@ rules: [
 ]
 ```
 
-再重新打包，看下 `index.html` 的样式，可以看到，样式已经定位到源文件上了：
+再重新打包，看下 `index.html` 的样式，样式已经定位到源文件上了：
 
 ![webpack04](http://images.pingan8787.com/webpack04.png)
 
@@ -399,8 +409,8 @@ npm install postcss-loader autoprefixer --save-dev
 
 * `postcss-import` 让我们可以在`@import` CSS文件的时 `webpack` 能监听并编译。
 
-
-`postcss-loader` 更多介绍和使用可以查看文档[《postcss-loader》](https://www.webpackjs.com/loaders/postcss-loader/)https://www.webpackjs.com/loaders/postcss-loader/。
+> 更多参数介绍，可访问中文官网的介绍:   
+> [《postcss-loader》](https://www.webpackjs.com/loaders/postcss-loader/) https://www.webpackjs.com/loaders/postcss-loader/
 
 开始添加 `postcss-loader` 并设置 `autoprefixer`：
 
@@ -647,7 +657,7 @@ module.exports = {
 }
 ```
 
-配置完成后，重新打包，就可以看到文件名中包含了 hash 值了：
+配置完成后，重新打包，就可以看到文件名中包含了 `hash` 值了：
 
 ![webpack08](http://images.pingan8787.com/webpack08.png)
 
@@ -698,7 +708,7 @@ plugins: [
 
 ## 八、 webpack 清理目录插件
 
-在之前，我们每次打包都会生成新的文件，并且在添加 hash 值以后，文件名不会出现重复的情况，导致每次打包都会生成新文件，并且这些文件都用不到。
+在之前，我们每次打包都会生成新的文件，并且在添加 `hash` 值以后，文件名不会出现重复的情况，导致旧文件的冗余。
 
 为了解决这个问题，我们需要在每次打包之前，将 `/dist` 目录清空，再进行打包。
 
@@ -732,7 +742,9 @@ plugins: [
 
 这样我们每次打包之前，都会先将 `/dist` 目录清空一次，再执行打包。   
 
-关于 `clean-webpack-plugin` 更多介绍可以[《查看文档》](https://github.com/jantimon/clean-webpack-plugin)https://github.com/jantimon/clean-webpack-plugin/。
+> 更多参数介绍，可访问中文官网的介绍:   
+> [《clean-webpack-plugin》](https://github.com/jantimon/clean-webpack-plugin)https://github.com/jantimon/clean-webpack-plugin/。
+
 
 ## 九、 webpack 图片处理和优化
 
@@ -811,7 +823,8 @@ module: {
 },
 ```
 
-关于 `image-webpack-loader` 更多介绍可以[《查看文档》](https://github.com/tcoopman/image-webpack-loader)https://github.com/tcoopman/image-webpack-loader。
+> 更多参数介绍，可访问中文官网的介绍:   
+> [《image-webpack-loader》](https://github.com/tcoopman/image-webpack-loader)https://github.com/tcoopman/
 
 再重新打包，我们可以看到图片打包前后，压缩了很大：
 
@@ -861,7 +874,9 @@ module: {
 },
 ```
 
-关于 `url-loader` 更多介绍可以[《查看文档》](https://github.com/webpack-contrib/url-loader)https://github.com/webpack-contrib/url-loader。
+> 更多参数介绍，可访问中文官网的介绍:   
+> [《url-loader》](https://github.com/webpack-contrib/url-loader)https://github.com/webpack-contrib/url-loader。
+
 
 ### 2. 字体处理
 
@@ -1094,7 +1109,7 @@ let prodConfig = {
 module.exports = merge(common, prodConfig)
 ```
 
-## 十二、 webpack 监控自动编译和启用 js 是 sourceMap
+## 十二、 webpack 监控自动编译和启用 js 的 sourceMap
 
 ### 1. 开启 js 的 sourceMap
 
@@ -1294,7 +1309,7 @@ npm install babel-loader standard --save-dev
 /node_modules/
 ```
 
-## 十六、 webpack 模块解析拓展名和别名
+## 十六、 webpack 解析模块拓展名和别名
 
 在 webpack 配置中，我们使用 `resolve` 来配置模块解析方式。
 
@@ -1360,7 +1375,8 @@ alias: {
 }
 ```
 
-关于 `resolve` 更多介绍可以[《查看文档》](https://www.webpackjs.com/configuration/resolve/)https://www.webpackjs.com/configuration/resolve/。
+> 更多参数介绍，可访问中文官网的介绍:   
+> [《resolve》](https://www.webpackjs.com/configuration/resolve/)https://www.webpackjs.com/configuration/resolve/。
 
 
 ### 2. resolve.extensions
@@ -1408,7 +1424,8 @@ import $ from 'jquery';
 $('.leo').show();
 ```
 
-关于 `externals` 更多介绍可以[《查看文档》](https://www.webpackjs.com/configuration/externals/)https://www.webpackjs.com/configuration/externals/。
+> 更多参数介绍，可访问中文官网的介绍:   
+> [《externals》](https://www.webpackjs.com/configuration/externals/)https://www.webpackjs.com/configuration/externals/。
 
 ## 十八、 webpack 打包分析报表及优化总结
 
@@ -1485,20 +1502,24 @@ externals: {
 
 ![webpack16](http://images.pingan8787.com/webpack16.png)
 
-关于 `webpack-bundle-analyzer` 更多介绍可以[《查看文档》](https://github.com/webpack-contrib/webpack-bundle-analyzer)https://github.com/webpack-contrib/webpack-bundle-analyzer。
+> 更多参数介绍，可访问中文官网的介绍:   
+> [《webpack-bundle-analyzer》](https://github.com/webpack-contrib/webpack-bundle-analyzer)https://github.com/webpack-contrib/webpack-bundle-analyzer。
 
 
 ## 参考资料
 
+* [《Webpack4 中文网》](https://www.webpackjs.com)
+
 * [《2019最新Webpack4.0教程4.x 成仙之路》](https://www.bilibili.com/video/av41546218/?p=1)
 
+
 ## 总结
 
 本文是根据 [《2019最新Webpack4.0教程4.x 成仙之路》](https://www.bilibili.com/video/av41546218/?p=1) 学习总结下来的学习之路，适合入门，涉及范围较多，内容比较长，需要能静下心来学习。
 
 内容如果有误，欢迎留言指点，我会及时修改。
 
-本文代码最终托管在我的 github 上，[点击查看](https://github.com/pingan8787/Leo-JavaScript/blob/master/Cute-Webpack/introduction/README.md)。
+本文代码最终托管在我的 github 上，[点击查看](https://github.com/pingan8787/Leo-JavaScript/blob/master/Cute-Webpack/introduction/README.md)(https://github.com/pingan8787/Leo-JavaScript/blob/master/Cute-Webpack/introduction/README.md)。
 
 
 希望自己的文章会对各位有所帮助，也欢迎各位大佬指点。