什么是WebPack

什么是WebPack

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

webpack

构建就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容。

代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

构建其实是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。构建给前端开发注入了更大的活力，解放了我们的生产力。

2. 初始化项目 [#](#t12. 初始化项目)

mkdir zhufeng-webpack
cd zhufeng-webpack
npm init -y

3. 快速上手 [#](#t23. 快速上手)

3.1 webpack核心概念 [#](#t33.1 webpack核心概念)

Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

Webpack 启动后会从Entry里配置的Module开始递归解析 Entry 依赖的所有 Module。每找到一个 Module，就会根据配置的Loader去找出对应的转换规则，对 Module 进行转换后，再解析出当前 Module 依赖的 Module。这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。最后 Webpack 会把所有 Chunk 转换成文件输出。在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。

3.2 配置webpack [#](#t43.2 配置webpack)

npm install webpack webpack-cli -D

3.2.1 创建src目录 [#](#t53.2.1 创建src目录)

mkdir src

3.2.2 创建dist目录 [#](#t63.2.2 创建dist目录)

mkdir dist

3.2.3 基本配置文件 [#](#t73.2.3 基本配置文件)

const path=require('path');
module.exports={
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module: {},
    plugins: [],
    devServer: {}
}

创建dist
- 创建index.html
配置文件webpack.config.js
- entry：配置入口文件的地址
- output：配置出口文件的地址
- module：配置模块,主要用来配置不同文件的加载器
- plugins：配置插件
- devServer：配置开发服务器

const path=require('path');
module.exports={
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    module: {},
    plugins: [],
    devServer: {}
}

3.2.4 创建index.html文件 [#](#t83.2.4 创建index.html文件)

在dist目录下创建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="root"></div>
<script src="bundle.js"></script>
</body>
</html>

4. 配置开发服务器 [#](#t94. 配置开发服务器)

npm i webpack-dev-server –D

contentBase 配置开发服务运行时的文件根目录
host：开发服务器监听的主机地址
compress 开发服务器是否启动gzip等压缩
port：开发服务器监听的端口

 devServer:{
   contentBase:path.resolve(__dirname,'dist'),
   host:'localhost',
   compress:true,
   port:8080
 }

"scripts": {
 "build": "webpack --mode development",
 "dev": "webpack-dev-server --open --mode development "
}

5. 支持加载css文件 [#](#t105. 支持加载css文件)

5.1 什么是Loader [#](#t115.1 什么是Loader)

通过使用不同的Loader，Webpack可以要把不同的文件都转成JS文件,比如CSS、ES6/7、JSX等

test：匹配处理文件的扩展名的正则表达式
use：loader名称，就是你要使用模块的名称
include/exclude:手动指定必须处理的文件夹或屏蔽不需要处理的文件夹
query：为loaders提供额外的设置选项

5.2 loader三种写法 [#](#t125.2 loader三种写法)

5.2.1 loader [#](#t135.2.1 loader)

加载CSS文件，CSS文件有可能在node_modules里，比如bootstrap和antd

module: {
        rules: [
            {
                test: /\.css/,
                loader:['style-loader','css-loader']
            }
        ]
    }

5.2.2 use [#](#t145.2.2 use)

module: {
        rules: [
            {
                test: /\.css/,
                use:['style-loader','css-loader']
            }
        ]
    },

5.2.3 use+loader [#](#t155.2.3 use+loader)

    module: {
        rules: [
            {
                test: /\.css/,
                include: path.resolve(__dirname,'src'),
                exclude: /node_modules/,
                use: [{
                    loader: 'style-loader',
                    options: {
                        insertAt:'top'
                    }
                },'css-loader']
            }
        ]
    }

6. 插件 [#](#t166. 插件)

在 webpack 的构建流程中，plugin 用于处理更多其他的一些构建任务
模块代码转换的工作由 loader 来处理
除此之外的其他任何工作都可以交由 plugin 来完成

6.1 自动产出html [#](#t176.1 自动产出html)

我们希望自动能产出HTML文件，并在里面引入产出后的资源

npm i html-webpack-plugin -D

minify 是对html文件进行压缩，removeAttrubuteQuotes是去掉属性的双引号
hash 引入产出资源的时候加上查询参数，值为哈希避免缓存
template 模版路径

 plugins: [
        new HtmlWebpackPlugin({
         minify: {
            removeAttributeQuotes:true
        },
        hash: true,
        template: './src/index.html',
        filename:'index.html'
  	})]

7. 支持图片 [#](#t187. 支持图片)

7.1 手动添加图片 [#](#t197.1 手动添加图片)

npm i file-loader url-loader -D

file-loader 解决CSS等文件中的引入图片路径问题
url-loader 当图片小于limit的时候会把图片BASE64编码，大于limit参数的时候还是使用file-loader 进行拷贝

7.2 JS中引入图片 [#](#t207.2 JS中引入图片)

7.2.1 JS [#](#t217.2.1 JS)

let logo=require('./images/logo.png');
let img=new Image();
img.src=logo;
document.body.appendChild(img);

7.2.2 webpack.config.js [#](#t227.2.2 webpack.config.js)

{
  test:/\.(jpg|png|bmp|gif|svg|ttf|woff|woff2|eot)/,
    use:[
    {
       loader:'url-loader',
       options:{limit:4096}
    }
  ]
}

7.3 在CSS中引入图片 [#](#t237.3 在CSS中引入图片)

还可以在CSS文件中引入图片

7.3.1 CSS [#](#t247.3.1 CSS)

.logo{
    width:355px;
    height:133px;
    background-image: url(./images/logo.png);
    background-size: cover;
}

7.3.2 HTML [#](#t257.3.2 HTML)

<div class="logo"></div>

8. 分离CSS [#](#t268. 分离CSS)

因为CSS的下载和JS可以并行,当一个HTML文件很大的时候，我们可以把CSS单独提取出来加载

mini-css-extract-plugin
filename 打包入口文件
chunkFilename 用来打包import('module')方法中引入的模块

8.1 安装依赖模块 [#](#t278.1 安装依赖模块)

npm install --save-dev mini-css-extract-plugin

8.2 配置webpack.config.js [#](#t288.2 配置webpack.config.js)

plugins: [
       //参数类似于webpackOptions.output
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename:'[id].css'
        }),

{
                test: /\.css/,
                include: path.resolve(__dirname,'src'),
                exclude: /node_modules/,
                use: [{
                    loader: MiniCssExtractPlugin.loader
                },'css-loader']
            }

8.3 压缩CSS和JS [#](#t298.3 压缩CSS和JS)

uglifyjs-webpack-plugin

optimize-css-assets-webpack-plugin

npm i uglifyjs-webpack-plugin -D
npm i optimize-css-assets-webpack-plugin -D

const UglifyJSplugin=require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

optimization: {
        minimizer: [
         new UglifyJSplugin({
               cache: true,//启用缓存
               parallel: true,// 使用多进程运行改进编译速度
               sourceMap:true//生成sourceMap映射文件
         }),
         new OptimizeCssAssetsWebpackPlugin({})
      ]
}

8.4 css和image存放单独目录 [#](#t308.4 css和image存放单独目录)

outputPath 输出路径
publicPath指定的是构建后在html里的路径

output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js',
       publicPath:'/'
    },
{
  test:/\.(jpg|jpeg|png|bmp|gif|svg|ttf|woff|woff2|eot)/,
  use:[
        {
          loader:'url-loader',
          options:{
              limit: 4096,
             outputPath: 'images',
             publicPath:'/images'
          }
        }
     ]
}

plugins: [
        new MiniCssExtractPlugin({
           filename: 'css/[name].css',
           chunkFilename:'css/[id].css'
        }),
  ]

8.5 在HTML中使用图片 [#](#t318.5 在HTML中使用图片)

npm i html-withimg-loader -D

index.html

<img src="./images/logo.png"/>

webpack.config.js

{
               test: /\.(html|htm)$/,
               use: 'html-withimg-loader'
}

9. 编译less 和 sass [#](#t329. 编译less 和 sass)

9.1 安装less [#](#t339.1 安装less)

npm i less less-loader -D
npm i node-saas sass-loader -D

9.2 编写样式 [#](#t349.2 编写样式)

less

@color:orange;
.less-container{
    color:@color;
}

sass

$color:green;
.sass-container{
    color:green;
}

webpack.config.js

{
        test: /\.less/,
        include: path.resolve(__dirname,'src'),
        exclude: /node_modules/,
        use: [{
            loader: MiniCssExtractPlugin.loader,
        },'css-loader','less-loader']
    },
    {
        test: /\.scss/,
        include: path.resolve(__dirname,'src'),
        exclude: /node_modules/,
        use: [{
            loader: MiniCssExtractPlugin.loader,
        },'css-loader','sass-loader']
    },

10. 处理CSS3属性前缀 [#](#t3510. 处理CSS3属性前缀)

为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀

Trident内核：主要代表为IE浏览器, 前缀为-ms
Gecko内核：主要代表为Firefox, 前缀为-moz
Presto内核：主要代表为Opera, 前缀为-o
Webkit内核：产要代表为Chrome和Safari, 前缀为-webkit
```
npm i postcss-loader autoprefixer -D
```
postcss-loader

index.css

::placeholder {
    color: red;
}

postcss.config.js

module.exports={
    plugins:[require('autoprefixer')]
}

webpack.config.js

{
   test:/\.css$/,
   use:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader'],
   include:path.join(__dirname,'./src'),
   exclude:/node_modules/
}

11. 转义ES6/ES7/JSX [#](#t3611. 转义ES6/ES7/JSX)

Babel其实是一个编译JavaScript的平台,可以把ES6/ES7,React的JSX转义为ES5

11.1 安装依赖包 [#](#t3711.1 安装依赖包)

npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-react babel-plugin-transform-decorators-legacy -D

11.2 decorator [#](#t3811.2 decorator)

//Option+Shift+A
function readonly(target,key,discriptor) {
    discriptor.writable=false;
}

class Person{
    @readonly PI=3.14;
}
let p1=new Person();
p1.PI=3.15;
console.log(p1)

jsconfig.json

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

11.3 webpack.config.js [#](#t3911.3 webpack.config.js)

{
    test: /\.jsx?$/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ["env","stage-0","react"],
            plugins:["transform-decorators-legacy"]
        }
    },
    include: path.join(__dirname,'src'),
    exclude:/node_modules/
}

12. 如何调试打包后的代码 [#](#t4012. 如何调试打包后的代码)

webpack通过配置可以自动给我们source maps文件，map文件是一种对应编译文件和源文件的方法

source-map 把映射文件生成到单独的文件，最完整最慢
cheap-module-source-map 在一个单独的文件中产生一个不带列映射的Map
eval-source-map 使用eval打包源文件模块,在同一个文件中生成完整sourcemap
cheap-module-eval-source-map sourcemap和打包后的JS同行显示，没有映射列

devtool:'eval-source-map'

13.打包第三方类库 #

13.1 直接引入 [#](#t4213.1 直接引入)

import _ from 'lodash';
alert(_.join(['a','b','c'],'@'));

13.2 插件引入 [#](#t4313.2 插件引入)

_ 函数会自动添加到当前模块的上下文，无需显示声明
```
new webpack.ProvidePlugin({
    _:'lodash'
})
```

没有全局的$函数，所以导入依赖全局变量的插件依旧会失败

13.3 expose-loader [#](#t4413.3 expose-loader)

不需要任何其他的插件配合，只要将下面的代码添加到所有的loader之前

require("expose-loader?libraryName!./file.js");

{
    test: require.resolve("jquery"),
    loader: "expose-loader?jQuery"
}

require("expose-loader?$!jquery");

13.4 externals [#](#t4513.4 externals)

如果我们想引用一个库，但是又不想让webpack打包，并且又不影响我们在程序中以CMD、AMD或者window/global全局等方式进行使用，那就可以通过配置externals

 const jQuery = require("jquery");
 import jQuery from 'jquery';

externals: {
        jquery: 'jQuery'//如果要在浏览器中运行，那么不用添加什么前缀，默认设置就是global
},

14. watch [#](#t4614. watch)

当代码发生修改后可以自动重新编译

watch: true,
watchOptions: {
    ignored: /node_modules/, //忽略不用监听变更的目录
    poll:1000, //每秒询问的文件变更的次数
    aggregateTimeout: 500, //防止重复保存频繁重新编译,500毫秒内重复保存不打包
}

webpack定时获取文件的更新时间，并跟上次保存的时间进行比对，不一致就表示发生了变化,poll就用来配置每秒问多少次
当检测文件不再发生变化，会先缓存起来，等待一段时间后之后再通知监听者，这个等待时间通过aggregateTimeout配置
webpack只会监听entry依赖的文件
我们需要尽可能减少需要监听的文件数量和检查频率，当然频率的降低会导致灵敏度下降

15. 添加商标 [#](#t4715. 添加商标)

new webpack.BannerPlugin('张熙沐枫'),

16. 拷贝静态文件 [#](#t4816. 拷贝静态文件)

有时项目中没有引用的文件也需要打包到目标目录

npm i copy-webpack-plugin -D

new CopyWebpackPlugin([{
  from: path.resolve(__dirname,'src/assets'),//静态资源目录源地址
  to:path.resolve(__dirname,'dist/assets') //目标地址，相对于output的path目录
}])

17. 打包前先清空输出目录 [#](#t4917. 打包前先清空输出目录)

npm i  clean-webpack-plugin -D

new CleanWebpackPlugin([path.resolve(__dirname,'dist')])

18. 服务器代理 [#](#t5018. 服务器代理)

如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求，那么代理某些 URL 会很有用。

18.1 不修改路径 [#](#t5118.1 不修改路径)

//请求到 /api/users 现在会被代理到请求 http://localhost:3000/api/users。
proxy: {
  "/api": 'http://localhost:3000'
}

18.2 修改路径 [#](#t5218.2 修改路径)

proxy: {
    "/api": {
       target: 'http://localhost:3000',
       pathRewrite:{"^/api":""}
    }
}

18.3 before after [#](#t5318.3 before after)

before 在 webpack-dev-server 静态资源中间件处理之前，可以用于拦截部分请求返回特定内容，或者实现简单的数据 mock。

before(app){
  app.get('/api/users', function(req, res) {
    res.json([{id:1,name:'zxmf1'}])
  })
}

18.4 webpack-dev-middleware [#](#t5418.4 webpack-dev-middleware)

webpack-dev-middleware 就是在 Express 中提供 webpack-dev-server 静态服务能力的一个中间件

npm install webpack-dev-middleware --save-dev

const express=require('express');
const app=express();
const webpack=require('webpack');
const webpackDevMiddleware=require('webpack-dev-middleware');
const webpackOptions=require('./webpack.config');
webpackOptions.mode='development';
const compiler=webpack(webpackOptions);
app.use(webpackDevMiddleware(compiler,{
    // webpack-dev-middleware 的配置选项
}));
app.listen(3000);

webpack-dev-server 的好处是相对简单，直接安装依赖后执行命令即可
而使用webpack-dev-middleware的好处是可以在既有的 Express 代码基础上快速添加 webpack-dev-server 的功能，同时利用 Express 来根据需要添加更多的功能，如 mock 服务、代理 API 请求等

19. resolve解析 [#](#t5519. resolve解析)

19.1 extensions [#](#t5619.1 extensions)

指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配

resolve: {
  extensions: [".js",".jsx",".json",".css"]
},

19.2 alias [#](#t5719.2 alias)

配置别名可以加快webpack查找模块的速度

每当引入bootstrap模块的时候，它会直接引入bootstrap,而不需要从node_modules文件夹中按模块的查找规则查找

const bootstrap = path.resolve(__dirname,'node_modules/_bootstrap@3.3.7@bootstrap/dist/css/bootstrap.css');
resolve: {
    alias:{
    "bootstrap":bootstrap
    }
},

19.3 modules [#](#t5819.3 modules)

对于直接声明依赖名的模块（如 react ），webpack 会类似 Node.js 一样进行路径搜索，搜索 node_modules 目录
这个目录就是使用 resolve.modules 字段进行配置的默认配置
```
resolve: {
	modules: ['node_modules'],
}
```
如果可以确定项目内所有的第三方依赖模块都是在项目根目录下的 node_modules 中的话
```
resolve: {
	modules: [path.resolve(__dirname, 'node_modules')],
}
```

19.4 mainFields [#](#t5919.4 mainFields)

默认情况下package.json 文件则按照文件中 main 字段的文件名来查找文件

resolve: {
  // 配置 target === "web" 或者 target === "webworker" 时 mainFields 默认值是：
  mainFields: ['browser', 'module', 'main'],
  // target 的值为其他时，mainFields 默认值为：
  mainFields: ["module", "main"],
}

19.5 mainFiles [#](#t6019.5 mainFiles)

当目录下没有 package.json 文件时，我们说会默认使用目录下的 index.js 这个文件，其实这个也是可以配置的

resolve: {
  mainFiles: ['index'], // 你可以添加其他默认使用的文件名
},

19.6 resolveLoader [#](#t6119.6 resolveLoader)

resolve.resolveLoader用于配置解析 loader 时的 resolve 配置,默认的配置：

module.exports = {
  //...
  resolveLoader: {
    modules: [ 'node_modules' ],
    extensions: [ '.js', '.json' ],
    mainFields: [ 'loader', 'main' ]
  }
};

20. noParse [#](#t6220. noParse)

module.noParse 字段，可以用于配置哪些模块文件的内容不需要进行解析
不需要解析依赖（即无依赖）的第三方大型类库等，可以通过这个字段来配置，以提高整体的构建速度
```
module.exports = {
// ...
module: {
  noParse: /jquery|lodash/, // 正则表达式
  // 或者使用函数
  noParse(content) {
    return /jquery|lodash/.test(content)
  },
}
}...
```
使用 noParse 进行忽略的模块文件中不能使用 import、require、define 等导入机制

21. DefinePlugin [#](#t6321. DefinePlugin)

DefinePlugin创建一些在编译时可以配置的全局常量

new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: "1",
    EXPRESSION: "1+2",
    COPYRIGHT: {
        AUTHOR: JSON.stringify("张熙沐枫")
    }
})

console.log(PRODUCTION);
console.log(VERSION);
console.log(EXPRESSION);
console.log(COPYRIGHT);

如果配置的值是字符串，那么整个字符串会被当成代码片段来执行，其结果作为最终变量的值
如果配置的值不是字符串，也不是一个对象字面量，那么该值会被转为一个字符串，如 true，最后的结果是 'true'
如果配置的是一个对象字面量，那么该对象的所有 key 会以同样的方式去定义
JSON.stringify(true) 的结果是 'true'

22. IgnorePlugin [#](#t6422. IgnorePlugin)

IgnorePlugin用于忽略某些特定的模块，让 webpack 不把这些指定的模块打包进去

import moment from  'moment';
console.log(moment);

new webpack.IgnorePlugin(/^\.\/locale/,/moment$/)

第一个是匹配引入模块路径的正则表达式
第二个是匹配模块的对应上下文，即所在目录名

20. 区分环境变量 [#](#t6520. 区分环境变量)

日常的前端开发工作中，一般都会有两套构建环境
一套开发时使用，构建结果用于本地开发调试，不进行代码压缩，打印 debug 信息，包含 sourcemap 文件
一套构建后的结果是直接应用于线上的，即代码都是压缩后，运行时不打印 debug 信息，静态文件不包括 sourcemap
webpack 4.x 版本引入了 mode 的概念
当你指定使用 production mode 时，默认会启用各种性能优化的功能，包括构建结果优化以及 webpack 运行性能优化
而如果是 development mode 的话，则会开启 debug 工具，运行时打印详细的错误信息，以及更加快速的增量编译构建

20.1 环境差异 [#](#t6620.1 环境差异)

生产环境
- 可能需要分离 CSS 成单独的文件，以便多个页面共享同一个 CSS 文件
- 需要压缩 HTML/CSS/JS 代码
- 需要压缩图片
开发环境
- 需要生成 sourcemap 文件
- 需要打印 debug 信息
- 需要 live reload 或者 hot reload 的功能...

20.2 获取mode参数 [#](#t6720.2 获取mode参数)

module.exports=(env,argv) => ({
    optimization: {
        minimizer: argv.mode == 'production'?[
            new UglifyJSplugin({
                  cache: true,//启用缓存
                  parallel: true,// 使用多进程运行改进编译速度
                  sourceMap:true//生成sourceMap映射文件
            }),
            new OptimizeCssAssetsWebpackPlugin({})
        ]:[]
    }
})

20.3 封装log方法 [#](#t6820.3 封装log方法)

webpack 时传递的 mode 参数，是可以在我们的应用代码运行时，通过 process.env.NODE_ENV 这个变量获取

export default function log(...args) {
    if (process.env.NODE_ENV == 'development') {
        console.log.apply(console,args);
    }
}

20.4 拆分配置 [#](#t6920.4 拆分配置)

可以把 webpack 的配置按照不同的环境拆分成多个文件，运行时直接根据环境变量加载对应的配置即可

webpack.base.js：基础部分，即多个文件中共享的配置
webpack.development.js：开发环境使用的配置
webpack.production.js：生产环境使用的配置
webpack.test.js：测试环境使用的配置...

webpack-merge

const { smart } = require('webpack-merge')
const webpack = require('webpack')
const base = require('./webpack.base.js')
module.exports = smart(base, {
  module: {
    rules: [],
  }
})

21. 多入口 [#](#t7021. 多入口)

有时候我们的页面可以不止一个HTML页面，会有多个页面，所以就需要多入口

const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
    entry: {
        index: './src/index.js',
        login: './src/login.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[hash].js',
        publicPath: '/'
    },
    plugins: [
        new HtmlWebpackPlugin({
            minify: {
                removeAttributeQuotes: true
            },
            hash: true,
            template: './src/index.html',
            chunks: ['index'],
            filename: 'index.html'
        }),
        new HtmlWebpackPlugin({
            minify: {
                removeAttributeQuotes: true
            },
            hash: true,
            chunks: ['login'],
            template: './src/login.html',
            filename: 'login.html'
        })
    ],
}

# 什么是WebPack

# 2. 初始化项目 [#](#t12. 初始化项目)

# 3. 快速上手 [#](#t23. 快速上手)

# 3.1 webpack核心概念 [#](#t33.1 webpack核心概念)

# 3.2 配置webpack [#](#t43.2 配置webpack)

# 3.2.1 创建src目录 [#](#t53.2.1 创建src目录)

# 3.2.2 创建dist目录 [#](#t63.2.2 创建dist目录)

# 3.2.3 基本配置文件 [#](#t73.2.3 基本配置文件)

# 3.2.4 创建index.html文件 [#](#t83.2.4 创建index.html文件)

# 4. 配置开发服务器 [#](#t94. 配置开发服务器)

# 5. 支持加载css文件 [#](#t105. 支持加载css文件)

# 5.1 什么是Loader [#](#t115.1 什么是Loader)

# 5.2 loader三种写法 [#](#t125.2 loader三种写法)

# 5.2.1 loader [#](#t135.2.1 loader)

# 5.2.2 use [#](#t145.2.2 use)

# 5.2.3 use+loader [#](#t155.2.3 use+loader)

# 6. 插件 [#](#t166. 插件)

# 6.1 自动产出html [#](#t176.1 自动产出html)

# 7. 支持图片 [#](#t187. 支持图片)

# 7.1 手动添加图片 [#](#t197.1 手动添加图片)

# 7.2 JS中引入图片 [#](#t207.2 JS中引入图片)

# 7.2.1 JS [#](#t217.2.1 JS)

# 7.2.2 webpack.config.js [#](#t227.2.2 webpack.config.js)

# 7.3 在CSS中引入图片 [#](#t237.3 在CSS中引入图片)

# 7.3.1 CSS [#](#t247.3.1 CSS)

# 7.3.2 HTML [#](#t257.3.2 HTML)

# 8. 分离CSS [#](#t268. 分离CSS)

# 8.1 安装依赖模块 [#](#t278.1 安装依赖模块)

# 8.2 配置webpack.config.js [#](#t288.2 配置webpack.config.js)

# 8.3 压缩CSS和JS [#](#t298.3 压缩CSS和JS)

# 8.4 css和image存放单独目录 [#](#t308.4 css和image存放单独目录)

# 8.5 在HTML中使用图片 [#](#t318.5 在HTML中使用图片)

# 9. 编译less 和 sass [#](#t329. 编译less 和 sass)

# 9.1 安装less [#](#t339.1 安装less)

# 9.2 编写样式 [#](#t349.2 编写样式)

# 10. 处理CSS3属性前缀 [#](#t3510. 处理CSS3属性前缀)

# 11. 转义ES6/ES7/JSX [#](#t3611. 转义ES6/ES7/JSX)

# 11.1 安装依赖包 [#](#t3711.1 安装依赖包)

# 11.2 decorator [#](#t3811.2 decorator)

# 11.3 webpack.config.js [#](#t3911.3 webpack.config.js)

# 12. 如何调试打包后的代码 [#](#t4012. 如何调试打包后的代码)

# 13.打包第三方类库 #

# 13.1 直接引入 [#](#t4213.1 直接引入)

# 13.2 插件引入 [#](#t4313.2 插件引入)

# 13.3 expose-loader [#](#t4413.3 expose-loader)

# 13.4 externals [#](#t4513.4 externals)

# 14. watch [#](#t4614. watch)

# 15. 添加商标 [#](#t4715. 添加商标)

# 16. 拷贝静态文件 [#](#t4816. 拷贝静态文件)

# 17. 打包前先清空输出目录 [#](#t4917. 打包前先清空输出目录)

# 18. 服务器代理 [#](#t5018. 服务器代理)

# 18.1 不修改路径 [#](#t5118.1 不修改路径)

# 18.2 修改路径 [#](#t5218.2 修改路径)

# 18.3 before after [#](#t5318.3 before after)

# 18.4 webpack-dev-middleware [#](#t5418.4 webpack-dev-middleware)

# 19. resolve解析 [#](#t5519. resolve解析)

# 19.1 extensions [#](#t5619.1 extensions)

# 19.2 alias [#](#t5719.2 alias)

# 19.3 modules [#](#t5819.3 modules)

# 19.4 mainFields [#](#t5919.4 mainFields)

# 19.5 mainFiles [#](#t6019.5 mainFiles)

# 19.6 resolveLoader [#](#t6119.6 resolveLoader)

# 20. noParse [#](#t6220. noParse)

# 21. DefinePlugin [#](#t6321. DefinePlugin)

# 22. IgnorePlugin [#](#t6422. IgnorePlugin)

# 20. 区分环境变量 [#](#t6520. 区分环境变量)

# 20.1 环境差异 [#](#t6620.1 环境差异)

# 20.2 获取mode参数 [#](#t6720.2 获取mode参数)

# 20.3 封装log方法 [#](#t6820.3 封装log方法)

# 20.4 拆分配置 [#](#t6920.4 拆分配置)

# 21. 多入口 [#](#t7021. 多入口)

什么是WebPack

2. 初始化项目 [#](#t12. 初始化项目)

3. 快速上手 [#](#t23. 快速上手)

3.1 webpack核心概念 [#](#t33.1 webpack核心概念)

3.2 配置webpack [#](#t43.2 配置webpack)

3.2.1 创建src目录 [#](#t53.2.1 创建src目录)

3.2.2 创建dist目录 [#](#t63.2.2 创建dist目录)

3.2.3 基本配置文件 [#](#t73.2.3 基本配置文件)

3.2.4 创建index.html文件 [#](#t83.2.4 创建index.html文件)

4. 配置开发服务器 [#](#t94. 配置开发服务器)

5. 支持加载css文件 [#](#t105. 支持加载css文件)

5.1 什么是Loader [#](#t115.1 什么是Loader)

5.2 loader三种写法 [#](#t125.2 loader三种写法)

5.2.1 loader [#](#t135.2.1 loader)

5.2.2 use [#](#t145.2.2 use)

5.2.3 use+loader [#](#t155.2.3 use+loader)

6. 插件 [#](#t166. 插件)

6.1 自动产出html [#](#t176.1 自动产出html)

7. 支持图片 [#](#t187. 支持图片)

7.1 手动添加图片 [#](#t197.1 手动添加图片)

7.2 JS中引入图片 [#](#t207.2 JS中引入图片)

7.2.1 JS [#](#t217.2.1 JS)

7.2.2 webpack.config.js [#](#t227.2.2 webpack.config.js)

7.3 在CSS中引入图片 [#](#t237.3 在CSS中引入图片)

7.3.1 CSS [#](#t247.3.1 CSS)

7.3.2 HTML [#](#t257.3.2 HTML)

8. 分离CSS [#](#t268. 分离CSS)

8.1 安装依赖模块 [#](#t278.1 安装依赖模块)

8.2 配置webpack.config.js [#](#t288.2 配置webpack.config.js)

8.3 压缩CSS和JS [#](#t298.3 压缩CSS和JS)

8.4 css和image存放单独目录 [#](#t308.4 css和image存放单独目录)

8.5 在HTML中使用图片 [#](#t318.5 在HTML中使用图片)

9. 编译less 和 sass [#](#t329. 编译less 和 sass)

9.1 安装less [#](#t339.1 安装less)

9.2 编写样式 [#](#t349.2 编写样式)

10. 处理CSS3属性前缀 [#](#t3510. 处理CSS3属性前缀)

11. 转义ES6/ES7/JSX [#](#t3611. 转义ES6/ES7/JSX)

11.1 安装依赖包 [#](#t3711.1 安装依赖包)

11.2 decorator [#](#t3811.2 decorator)

11.3 webpack.config.js [#](#t3911.3 webpack.config.js)

12. 如何调试打包后的代码 [#](#t4012. 如何调试打包后的代码)

13.打包第三方类库 #

13.1 直接引入 [#](#t4213.1 直接引入)

13.2 插件引入 [#](#t4313.2 插件引入)

13.3 expose-loader [#](#t4413.3 expose-loader)

13.4 externals [#](#t4513.4 externals)

14. watch [#](#t4614. watch)

15. 添加商标 [#](#t4715. 添加商标)

16. 拷贝静态文件 [#](#t4816. 拷贝静态文件)

17. 打包前先清空输出目录 [#](#t4917. 打包前先清空输出目录)

18. 服务器代理 [#](#t5018. 服务器代理)

18.1 不修改路径 [#](#t5118.1 不修改路径)

18.2 修改路径 [#](#t5218.2 修改路径)

18.3 before after [#](#t5318.3 before after)

18.4 webpack-dev-middleware [#](#t5418.4 webpack-dev-middleware)

19. resolve解析 [#](#t5519. resolve解析)

19.1 extensions [#](#t5619.1 extensions)

19.2 alias [#](#t5719.2 alias)

19.3 modules [#](#t5819.3 modules)

19.4 mainFields [#](#t5919.4 mainFields)

19.5 mainFiles [#](#t6019.5 mainFiles)

19.6 resolveLoader [#](#t6119.6 resolveLoader)

20. noParse [#](#t6220. noParse)

21. DefinePlugin [#](#t6321. DefinePlugin)

22. IgnorePlugin [#](#t6422. IgnorePlugin)

20. 区分环境变量 [#](#t6520. 区分环境变量)

20.1 环境差异 [#](#t6620.1 环境差异)

20.2 获取mode参数 [#](#t6720.2 获取mode参数)

20.3 封装log方法 [#](#t6820.3 封装log方法)

20.4 拆分配置 [#](#t6920.4 拆分配置)

21. 多入口 [#](#t7021. 多入口)