视频推荐：https://www.bilibili.com/video/av51579321/?p=10
WebPack官网：https://webpack.js.org/（尽量看英文的，中文版本的有些没及时更新）

课时1 webpack4介绍

1.webpack4新特性
webpack需要设置mode属性，可以是development或production.例如：webpack --mode development
webpack针对development-开发模式的特性
1）浏览器调试工具
2）注释、开发阶段的详细错误日志和提示
3）快速和优化的增量构建机制
webpack针对production-生产模式提供的特性
1）开启所有的代码优化
2）更小的bundle大小
3）去除掉只有开发阶段运行的代码
4）Scope hosting和Tree-shaking

2.插件和优化
webpack4删除了CommonsChunkPlugin插件，它使用内置APIoptimization.splitChunks和optimization.runtimeChunk,
这意味着webpack会默认为你生成共享的代码块。（还有其他几个）

3.开箱即用WebAssembly,wasm会带来性能的大幅提升，允许浏览器运行二进制文件，可以通过编写loaders来直接import C++、C或Rust。

4.支持多种模块类型
共5种：
javascript/auto:在webpack3里，默认开启对所有模块系统的支持，包括CommonJS、AMD、ESM。
javascript/esm:只支持ESM这种静态模块。
javascript/dynamic:只支持CommonJS和AMD这种动态模块。
json:支持支JSON数据，可以通过require和import来使用。
webassenbly/experimental:只支持wasm模块，目前处于试验阶段。

5.0CJS 含义是0配置，webpack4受Parcel打包工具启发，尽可能的让开发者运行项目的成本变低。为了做到0配置，webpack4不再强调
需要webpack.config.js作为打包的入口配置文件了，它默认的入口为'./src/'和默认出口'./dist',对小项目而言是福音。

6.新的插件系统
webpack4对插件系统进行了不少修改，提供了针对插件和钩子的新API.
变化如下：
1）所有的hook由hooks对象同一管理，它将所有的hook作为可扩展的类属性。
2）当添加插件时，必须提供一个插件名称。
3）开发插件时，可以选择sync/callback/prpmise作为插件类型。
4）可以通过this.hooks = {myHook:new SyncHool(...)}来注册hook了。

注意点：当使用webpack4时，确保使用Node.js的版本>=8.9.4。因为webpack4使用了很多JS新的语法，他们在新版本的v8里经过了优化。

课时2 安装与基本命令

npm install webpack-cli -g
npm install webpack -g
webpack --mode development xxx.js -o bundle.json

课时3 配置文件_入口出口

//单个文件
const path = require('path');

module.exports = {
    entry: './input.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'output.bundle.js'
    }
};

//多个文件
module.exports = {
    entry: {//多个打包入口
        home: './home.js',
        about: './about.js',
        other: './other.js',
    },
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: '[name].bundle.js'
    },
    mode:'development',//其它参数production 
};

课时4 加载器_url-loader

loaders用来对源文件预处理，处理成浏览器能执行的文件。

const path = require('path');

module.exports = {
    entry: './input.js',
    output: {
        path: path.resolve(__dirname,'dist'),
        filename: 'output.bundle.js'
    },
    mode:'development',
    module:{
      rules: [
        {
          test: /\.(png|jpg|gif)$/i,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 18192 //限制图片的大小，如果图片大小在限制范围内，则打包时转化为base64,否则还是普通的物理文件
              }
            }
          ]
        }
      ]
    }
};

npm init -y //生成package.json

npm install url-loader -S //安装url-loader,-S是安装完url-loader之后记录到package.json中

npm install file-loader -S //使用url-loader同时需要安装file-loader

课时5 加载器babel-loader

把ES6代码（ES2015、ES2016、ES2017、ES2018）转化为浏览器(主要指的是低版本的浏览器，高版本的google浏览器支持大部分ES6语法规则)支持的ES5代码，Angular/Vue/React都需要用到babel-loader。
安装：npm install -D babel-loader @babel/core @babel/preset-env webpack

module: {
  rules: [
    {
      test: /\.m?js$/, //正则
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
          plugins: ['@babel/plugin-proposal-object-rest-spread'] //添加支持的插件，如支持React语法规则，注意：正则需要扩展文件的扩展名
        }
      }
    }
  ]
}

课时6 加载器sass-loader

将sass 转化为css 并打包到js文件中。
安装：npm install sass-loader node-sass webpack --save-dev或者cnpm install sass-loader node-sass -D
同时需要安装：cnpm install style-loader css-loader -D
配置文件：

module: {
        rules: [{
            test: /\.scss$/,
            use: [
                "style-loader", // creates style nodes from JS strings
                "css-loader", // translates CSS into CommonJS
                "sass-loader" // compiles Sass to CSS, using Node Sass by default
            ]
        }]
    }

sass 可理解为可编程css,如：

$color:#fff; //变量

body{
    background: $color;
}

课时7 插件minCssExtract

把sass 转化成css 后，输出到css文件中去,实现js与css的分离。
安装：npm install --save-dev mini-css-extract-plugin或者cnpm install mini-css-extract-plugin -D
需修改的配置文件：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

plugins: [
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: '[name].css',
        chunkFilename: '[id].css',
      }),
    ],
module: {
        rules: [{
          test: /\.scss$/,
          use: [ 
              // "style-loader", // creates style nodes from JS strings
              MiniCssExtractPlugin.loader,
              "css-loader", // translates CSS into CommonJS
              "sass-loader" // compiles Sass to CSS, using Node Sass by default]
          ]
        }]
    }

课时8 插件DefinePlugin

DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和发布模式的构建允许不同的行为非常有用。如果在开发构建中，而不在发布构建中执行日志记录，则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处，设置它，就可以忘记开发和发布构建的规则。

const webpack =  require('webpack');
plugins: [
      new MiniCssExtractPlugin({
        // Options similar to the same options in webpackOptions.output
        // both options are optional
        filename: '[name].css',
        chunkFilename: '[id].css',
      }),
      new webpack.DefinePlugin({
        'SERVICE_URL': JSON.stringify('https://www.baidu.com')
      }),
    ],

在js中使用该全局变量：SERVICE_URL

async function sayHello(){
    const result = await fetch(SERVICE_URL);
    console.log(result);
}

这样可以针对开发模式和生产模式分别设置配置文件，而不用维护代码，给维护带来了极大便利。

课时9 插件HtmlWebpackPlugin

HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次
会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件，使用
lodash模板提供你自己的模板，或使用你自己的loader。
安装：npm install --save-dev html-webpack-plugin或者cnpm install html-webpack-plugin -D
配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');
vconst path = require('path');

const webpackConfig = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

运行webpack命令后生成的html中自动引用生成的css和js文件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  <link href="main.css" rel="stylesheet"></head>
  <body>
  <script type="text/javascript" src="output.bundle.js"></script></body>
</html>

但是我们通常除了引用打包的js外还需要应用其它的js等文件，比如jquery等，此时就需要进一步配置了。
修改的配置文件：

plugins: [ new HtmlWebpackPlugin({
        title: 'Good Morning',//title可以应用到html文件中
        filename: 'index.html',//输出文件
        template: 'template.html'//自己的输入文件
      })]

自己的html（template）文件：

<!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><%= htmlWebpackPlugin.options.title %></title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous"></script>
</head>
<body>
    <div id="good"></div>
</body>
</html>

打包之后的html（index）文件

<!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>Good Morning</title>
    <script src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
        crossorigin="anonymous"></script>
<link href="main.css" rel="stylesheet"></head>
<body>
    <div id="good"></div>
<script type="text/javascript" src="output.bundle.js"></script></body>
</html>

课时10 热替换

每次修改代码就需要编译一下，这样操作会很繁琐。期望编译操作是自动化的。
安装：npm install webpack-dev-server --save-dev或者cnpm install webpack-dev-server -D
配置：

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,//是否压缩
    port: 9000
  }
};

运行cmd命令：webpack-dev-server 但是这个并没有全局安装，是个坑，可以在package.json文件中进行设置.

"scripts": {
    "start": "webpack-dev-server"
  }

运行cmd命令：npm run start
没有局部安装webpack-cli,打包时出错了。安装cnpm install webpack-cli -D
修改html时，服务器自动编译.

课时11 webpack4升级实战

开发项目。npm install vue-cli -g
vue开发，脚手架用的webpack3,如何升级到webpack4
解决思路:先升级webpack到4，然后根据项目报错信息升级对应升级的组件，是个系统的工程。

cnpm install XXX 这个-D,-S 如何区分：如果安装要保存到package.json的dependencies节点中，用的是-S,如果是devDepencies中则用的是-D

webpack 和webpack-dev-server 是配套的，版本一致。

升级组件时一般用的是latest，可能有的要用next版本，这是个坑：

cnpm install extract-text-webpack-plugin@latest -D 
cnpm install extract-text-webpack-plugin@next -D 还没对外发布，但已经开发完了