webpack4.0(基础学习)

Index

• 01.webpack 的作用
• 02.webpack 安装
• 03.使用 yarn 安装 webpack (基础配置)
• 04.html 插件
• 05.css 插件
• 06.es6转化
• 07.处理JS语法及校验
• 08.全局变量引入问题
• 09.对图片的支持
• 10.文件的划分
• 11.多页面打包
• 12.source-map 配置
• 13.watch 代码修改后的监控
• 14.三个基本的 webpack插件

01.webpack 的作用

主要是对前端的一些静态资源
(css 资源，字体资源，图片资源，模板文件)
如.css .sass .less .js .ts .jpeg .png .jpg .gif .vue .coffee 等等，
进行统一的管理. 它的主要作用有 下面三个3个

1. 解决错综复杂的依赖关系。
2. 将多个 js css less 图片 等文件压缩合并，防止过多的二次请求导致网页加载过慢。
3. 对js 进行优化，结构的优化和高级语法的转化

   02.webpack 安装

• webpack，安装本地较为常用的是 针对于每个项目进行 webpack
• webpack4.0 常见安装 需要我们除了安装 webpack 外 还必须安装 它的脚手架
• webpack webpack-cli -D -D表示 开发环境
• webpack 4.0 默认支持 打包命令 npx webpack
• webpack 支持 node 中的模块化 也就是 common JS ，打包js 进行一个模块化的管理。
• webpack 虽然默认支持 js的打包，但是像是 html css 等文件的打包，还是要下载插件进行配置的，他就像是一个集成插件库。配置的时候并不轻松。

  03.使用 yarn 安装 webpack (基础配置)

  先全局安装 yarn cmd下 npm install yarn -g yarn 下在可比 npm 快多了。yarn.lock的🔒版本也强于npm。

1. 先初始化项目 yarn init -y 这个命令和 npm 初始化命令类似 npm init -y
2. 安装 webpack 和 webpa-cli yarn add webpack webpack-cli -D
3. 先配置一个 默认的配置文件 webpack.config.js
4. 安装 webpack 内置服务 yarn add webpack-dev-server -D

5. 填写一些最基本的配置 scripts

   "scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server"
   },

   04.html 插件

6. 安装 webpack html插件 yarn add html-webpack-plugin -D

7. webpack.config.js 中去添加配置项

   let HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html 的插件
   plugins: [ //webpack 插件
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes:true, //去除双引号
                collapseWhitespace:true //折叠行
            },
            hash:true //hash戳
        })
    ]

   05.css 插件

8. 安装 css loader yarn add css-loader style-loader -D

9. 配置 moudle 和 loader 。记住 loader 的执行顺序 。 从右向左，从上到下。
10. 同样的 我们也可以 配置 less，先安装 less 文件 yarn add less less-loader -D
11. 抽离css的插件 yarn add mini-css-extract-plugin 并去 webpack.config.js 中进行配置。
12. 为css 添加前缀 yarn add postcss-loader autoprefixer -D
13. 再去配置一个 yarn add terser-webpack-plugin -D

14. 还有 yarn add optimize-css-assets-webpack-plugin -D

    module: {
         rules: [
             { // 第一个规则是 CSS的
                 test: /\.css$/,
                 use: [
                     'style-loader',
                     'css-loader'
                 ]
             },         
             { // 这是 less 的规则
                 test: /\.less$/,
                 use: [
                     {
                         loader: 'style-loader',
                         options: {
                         }
                     },
                     'css-loader',
                     'less-loader' //先将 less 转换成 css
                 ]
             }
         ]
     }

    06.es6转化

15. bable yarn add babel-loader @babel/core @babel/preset-env -D

16. ES7 yarn add @babel/plugin-proposal-class-properties -D

17. JS 装饰器 yarn add @babel/plugin-proposal-decorators -D

    07.处理JS语法及校验

    其实 eslint 这种检验，使用起来好麻烦的，也会影响效率。像vscode这样的编译器自身一般都会有eslint插件，没必要再去webpack配置

18. yarn add @babel/plugin-transform-runtime -D

19. yarn add @babel/runtime
20. yarn add @babel/polyfill
21. yarn add eslint eslint-loader

22. yarn eslint --init 会初始化生成 .eslintrc.js 文件

    08.全局变量引入问题

    如下面的例子，配置完毕就不在需要，全局 import $ from ‘jquery’之类的·这种写法。webpack将自动导入jquery

23. yarn add expose-loader

24. webpack.config.js 中添加新的配置

    //[1] 引入插件
    const webpack = require('webpack');
    //[2]基本配置
    new webpack.ProvidePlugin({
     $: 'jquery',
     jQuery: 'jquery',
     window.jQuery': 'jquery',
     'window.$': 'jquery',
    }),
    //[3]千万别忘了，最后还要匹配规则
    {
     test: require.resolve('jquery'),
     use: [
             {loader: 'expose-loader',options: 'jQuery'}, 
             {loader: 'expose-loader', options: '$'
      }]
    },

    09.对图片的支持

    9.1-第一种方式 加载图片

    1.先使用 ES6的方法 将图片导入 import addr_1 from ‘./xx.png’ 2.原生js crete 标签 appenChild() 节点。 3.在前两个步骤之前 我们需要 先去 yarn add file-loader 然后小小的配置一下。 其实插件将 file-loader addr_1 这个打包后的地址给了我们，……

{
    test: /\.(png|jpg|gif|jpng)$/,
    use: [{
        loader: 'file-loader',
        options: {}
    }]
},

额外的两个loader
yarn add url-loader -D
yarn add html-withimg-loader -D
9.2-第二种方式 加载图片
直接 通过 css-loader 这个插件，在js 文件中去引入 import ‘./xxx.css’ 而在css文件中直接使用如 background:url(‘./xxx.jpg’)
因为路径等种种问题，极其容易报错… … (已成功配置出一个)
9.3-第三种方式 加载图片
以后看 … …

10.文件的划分

有时候，我们不想要打包后的文件都杂乱无章的排列在输出的root目录下，需要对文件进行划分
[CSS]

new MiniCssExtractPlugin({ //CSS
    filename: "css/main.css"
})

[js]

// filename: "js/boudle.[hash:8].js",
   filename: "js/boudle.js",

[images]

outputPath: "./images", // 输出路径

也可以设置某一项/共同的文件 公共路径

// publicPath: "./images",

11.多页面打包

记录一次完整的例子-webpack-02
1.初始化配置
建立如下 文件结构

2. 插件安装

1. yarn init -y
2. yarn add webpack webpack -D
3. yarn add html-webpack-plugin -D

3. webpack.config.js 配置

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    mode: 'development',
    entry: {
        index: './src/js/index.js',
        other: './src/js/other.js'
    },
    output: {
        filename: 'js/[name].js',//
        path: path.resolve(__dirname, 'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename:'index.html',
            chunks:['index']
        }),
        new HtmlWebpackPlugin({
            template: './src/other.html',
            filename:'other.html',
            chunks:['other']
        })
    ]
};

12.source-map 配置

配置 source-map 用于调试源码 记录一次完整的配置 webpack-03
1.建立文件结构

• webpack-03
  • src
    • js
      • index.js
    • index.html
  • webpack.config.js

2.插件安装 & 环境搭建

• yarn init -y ——————文件初始化
• yarn add webpack webpack-cli -D —————- 安装 webpack 和 webpack 脚手架
• yarn add webpack-dev-server -D —————-安装 本地运行 server
• yarn add html-webpack-plugin -D —————— 安装 html 插件
• yarn add @babel/core @babel/preset-env babel-loader -D —————安装 babel 高级JS语法转化

3.配置文件的补充
[package.json]

//++
"scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server"
  },

[webpack.config.js]

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    mode: 'production',
    entry: {
        index: './src/js/index.js',
    },
    module: {
        rules:[
            {
                test: /\.js$/,
                use:{
                    loader: 'babel-loader',
                    options:{
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    devtool:'source-map',
    output: {
        filename: 'js/[name].js',//
        path: path.resolve(__dirname, 'dist')
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename:'index.html',
            chunks:['index']
        })
    ]
};

4.几种配置

1. source-map 源码映射文件大而全。js出错会标识源代码的行,并精准定位
2. eval-source-map 不会产生单独的.map 文件，会显示出错的行和列
3. cheap-module-source-map，产生的文件 不是关联的
4. cheap-module-eval-source-map 不产生文件，集成打包后的文件中，不会产生行和列

   13.watch 代码修改后的监控

   仅仅需要在 webpack.config.js 中添加一些配置

   watch: true,
   watchOptions: {
   poll: 1000, //每秒问我多少次
   aggregateTimeout: 500, //防抖 输入500ms 停止后代码更新后
   ignored: /node_modules/ //不需要进行监控的文件夹
   },
   

   14.三个基本的 webpack插件

   完整例子- webpack-04
   14.1 clean-webpack-plugin

   作用：每次打包文件时，删除上一次的旧的文件夹，打包出最新的一份文件夹。 先安装 ：yarn add clean-webpack-plugin -D 再配置 ：注意版本问题，使用最新的写法，呵呵

const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //引入插件
new CleanWebpackPlugin(), //plugin 中添加

14.2 copy-webpack-plugin

作用：文件资源的拷贝 先安装 ：yarn add copy-webpack-plugin -D

const CopyWebpackPlugin = require('copy-webpack-plugin'); //引入插件
new CopyWebpackPlugin([
    {
        from: __dirname + '/public/lib',
        to: __dirname + '/dist/lib'
    }，
    {
        //可配置多个对象
    }
]),

14.3 banner-plugin

作用：打包后的js ，文件头 生成标注信息 如’xxx in maded’ 这个插件式 webpack的内置插件，无需命令行安装。

const webpack = require('webpack'); //先引入 webpack
new webpack.BannerPlugin('Alex wrote in September 2019.9'); //再去配置它。

%60Index%60%0A%0A%5BTOC%5D%0A%0A*%0A%23%23%23%23%2001.webpack%20%E7%9A%84%E4%BD%9C%E7%94%A8%0A%E4%B8%BB%E8%A6%81%E6%98%AF%E5%AF%B9%E5%89%8D%E7%AB%AF%E7%9A%84%E4%B8%80%E4%BA%9B%E9%9D%99%E6%80%81%E8%B5%84%E6%BA%90%0A(css%20%E8%B5%84%E6%BA%90%EF%BC%8C%E5%AD%97%E4%BD%93%E8%B5%84%E6%BA%90%EF%BC%8C%E5%9B%BE%E7%89%87%E8%B5%84%E6%BA%90%EF%BC%8C%E6%A8%A1%E6%9D%BF%E6%96%87%E4%BB%B6)%20%0A%E5%A6%82.css%20.sass%20.less%20.js%20.ts%20.jpeg%20.png%20.jpg%20.gif%20.vue%20.coffee%20%E7%AD%89%E7%AD%89%EF%BC%8C%0A%E8%BF%9B%E8%A1%8C%E7%BB%9F%E4%B8%80%E7%9A%84%E7%AE%A1%E7%90%86.%20%E5%AE%83%E7%9A%84%E4%B8%BB%E8%A6%81%E4%BD%9C%E7%94%A8%E6%9C%89%20%E4%B8%8B%E9%9D%A2%E4%B8%89%E4%B8%AA3%E4%B8%AA%0A1.%20%E8%A7%A3%E5%86%B3%E9%94%99%E7%BB%BC%E5%A4%8D%E6%9D%82%E7%9A%84%E4%BE%9D%E8%B5%96%E5%85%B3%E7%B3%BB%E3%80%82%0A2.%20%E5%B0%86%E5%A4%9A%E4%B8%AA%20js%20css%20less%20%E5%9B%BE%E7%89%87%20%E7%AD%89%E6%96%87%E4%BB%B6%E5%8E%8B%E7%BC%A9%E5%90%88%E5%B9%B6%EF%BC%8C%E9%98%B2%E6%AD%A2%E8%BF%87%E5%A4%9A%E7%9A%84%E4%BA%8C%E6%AC%A1%E8%AF%B7%E6%B1%82%E5%AF%BC%E8%87%B4%E7%BD%91%E9%A1%B5%E5%8A%A0%E8%BD%BD%E8%BF%87%E6%85%A2%E3%80%82%0A3.%20%E5%AF%B9js%20%E8%BF%9B%E8%A1%8C%E4%BC%98%E5%8C%96%EF%BC%8C%E7%BB%93%E6%9E%84%E7%9A%84%E4%BC%98%E5%8C%96%E5%92%8C%E9%AB%98%E7%BA%A7%E8%AF%AD%E6%B3%95%E7%9A%84%E8%BD%AC%E5%8C%96%0A%0A%23%23%23%23%2002.webpack%20%E5%AE%89%E8%A3%85%0A-%20webpack%EF%BC%8C%E5%AE%89%E8%A3%85%E6%9C%AC%E5%9C%B0%E8%BE%83%E4%B8%BA%E5%B8%B8%E7%94%A8%E7%9A%84%E6%98%AF%20%E9%92%88%E5%AF%B9%E4%BA%8E%E6%AF%8F%E4%B8%AA%E9%A1%B9%E7%9B%AE%E8%BF%9B%E8%A1%8C%20webpack%0A-%20webpack4.0%20%E5%B8%B8%E8%A7%81%E5%AE%89%E8%A3%85%20%E9%9C%80%E8%A6%81%E6%88%91%E4%BB%AC%E9%99%A4%E4%BA%86%E5%AE%89%E8%A3%85%20webpack%20%E5%A4%96%20%E8%BF%98%E5%BF%85%E9%A1%BB%E5%AE%89%E8%A3%85%20%E5%AE%83%E7%9A%84%E8%84%9A%E6%89%8B%E6%9E%B6%0A-%20webpack%20webpack-cli%20-D%20%20%20%20%20%20%20%20%20-D%E8%A1%A8%E7%A4%BA%20%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%0A-%20webpack%204.0%20%E9%BB%98%E8%AE%A4%E6%94%AF%E6%8C%81%20%E6%89%93%E5%8C%85%E5%91%BD%E4%BB%A4%20%60npx%20webpack%60%20%20%0A-%20webpack%20%E6%94%AF%E6%8C%81%20node%20%E4%B8%AD%E7%9A%84%E6%A8%A1%E5%9D%97%E5%8C%96%20%E4%B9%9F%E5%B0%B1%E6%98%AF%20%60common%20JS%60%20%EF%BC%8C%E6%89%93%E5%8C%85js%20%E8%BF%9B%E8%A1%8C%E4%B8%80%E4%B8%AA%E6%A8%A1%E5%9D%97%E5%8C%96%E7%9A%84%E7%AE%A1%E7%90%86%E3%80%82%0A-%20webpack%20%E8%99%BD%E7%84%B6%E9%BB%98%E8%AE%A4%E6%94%AF%E6%8C%81%20js%E7%9A%84%E6%89%93%E5%8C%85%EF%BC%8C%E4%BD%86%E6%98%AF%E5%83%8F%E6%98%AF%20html%20css%20%E7%AD%89%E6%96%87%E4%BB%B6%E7%9A%84%E6%89%93%E5%8C%85%EF%BC%8C%E8%BF%98%E6%98%AF%E8%A6%81%E4%B8%8B%E8%BD%BD%E6%8F%92%E4%BB%B6%E8%BF%9B%E8%A1%8C%E9%85%8D%E7%BD%AE%E7%9A%84%EF%BC%8C%E4%BB%96%E5%B0%B1%E5%83%8F%E6%98%AF%E4%B8%80%E4%B8%AA%E9%9B%86%E6%88%90%E6%8F%92%E4%BB%B6%E5%BA%93%E3%80%82%E9%85%8D%E7%BD%AE%E7%9A%84%E6%97%B6%E5%80%99%E5%B9%B6%E4%B8%8D%E8%BD%BB%E6%9D%BE%E3%80%82%0A%20%20%0A%23%23%23%23%2003.%E4%BD%BF%E7%94%A8%20yarn%20%E5%AE%89%E8%A3%85%20webpack%20(%E5%9F%BA%E7%A1%80%E9%85%8D%E7%BD%AE)%0A%E5%85%88%E5%85%A8%E5%B1%80%E5%AE%89%E8%A3%85%20%60yarn%60%20%20cmd%E4%B8%8B%20%60npm%20install%20yarn%20-g%60%20yarn%20%E4%B8%8B%E5%9C%A8%E5%8F%AF%E6%AF%94%20npm%20%E5%BF%AB%E5%A4%9A%E4%BA%86%E3%80%82yarn.lock%E7%9A%84%F0%9F%94%92%E7%89%88%E6%9C%AC%E4%B9%9F%E5%BC%BA%E4%BA%8Enpm%E3%80%82%0A%0A1.%20%E5%85%88%E5%88%9D%E5%A7%8B%E5%8C%96%E9%A1%B9%E7%9B%AE%20%20%60yarn%20init%20-y%60%20%20%20%E8%BF%99%E4%B8%AA%E5%91%BD%E4%BB%A4%E5%92%8C%20npm%20%E5%88%9D%E5%A7%8B%E5%8C%96%E5%91%BD%E4%BB%A4%E7%B1%BB%E4%BC%BC%20%60npm%20init%20-y%60%20%0A2.%20%E5%AE%89%E8%A3%85%20webpack%20%E5%92%8C%20webpa-cli%20%20%60%20yarn%20add%20webpack%20webpack-cli%20-D%20%60%20%0A3.%20%E5%85%88%E9%85%8D%E7%BD%AE%E4%B8%80%E4%B8%AA%20%E9%BB%98%E8%AE%A4%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%20%60webpack.config.js%60%0A4.%20%E5%AE%89%E8%A3%85%20webpack%20%E5%86%85%E7%BD%AE%E6%9C%8D%E5%8A%A1%20%60%20yarn%20add%20%20webpack-dev-server%20-D%20%60%20%20%0A5.%20%E5%A1%AB%E5%86%99%E4%B8%80%E4%BA%9B%E6%9C%80%E5%9F%BA%E6%9C%AC%E7%9A%84%E9%85%8D%E7%BD%AE%20%60%20scripts%60%20%20%0A%60%60%60%0A%22scripts%22%3A%C2%A0%7B%0A%20%20%20%20%22build%22%3A%C2%A0%22webpack%C2%A0—config%C2%A0webpack.config.js%22%2C%0A%20%20%20%20%22dev%22%3A%C2%A0%22webpack-dev-server%22%0A%7D%2C%0A%60%60%60%0A%0A%23%23%23%23%2004.html%20%E6%8F%92%E4%BB%B6%20%0A1.%20%E5%AE%89%E8%A3%85%20webpack%20html%E6%8F%92%E4%BB%B6%20%60%20yarn%20add%20html-webpack-plugin%20-D%60%0A2.%20%60%20webpack.config.js%60%20%20%E4%B8%AD%E5%8E%BB%E6%B7%BB%E5%8A%A0%E9%85%8D%E7%BD%AE%E9%A1%B9%0A%60%60%60%0Alet%C2%A0HtmlWebpackPlugin%C2%A0%3D%C2%A0require(‘html-webpack-plugin’)%3B%C2%A0%2F%2F%E6%89%93%E5%8C%85html%C2%A0%E7%9A%84%E6%8F%92%E4%BB%B6%0Aplugins%3A%C2%A0%5B%C2%A0%2F%2Fwebpack%C2%A0%E6%8F%92%E4%BB%B6%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0new%C2%A0HtmlWebpackPlugin(%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0template%3A%C2%A0’.%2Fsrc%2Findex.html’%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0filename%3A%C2%A0’index.html’%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0minify%3A%C2%A0%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0removeAttributeQuotes%3Atrue%2C%20%2F%2F%E5%8E%BB%E9%99%A4%E5%8F%8C%E5%BC%95%E5%8F%B7%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0collapseWhitespace%3Atrue%20%2F%2F%E6%8A%98%E5%8F%A0%E8%A1%8C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0hash%3Atrue%20%2F%2Fhash%E6%88%B3%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D)%0A%C2%A0%C2%A0%C2%A0%C2%A0%5D%0A%60%60%60%0A%0A%23%23%23%23%2005.css%20%E6%8F%92%E4%BB%B6%20%0A1.%20%E5%AE%89%E8%A3%85%20css%20loader%20%60%20yarn%20add%20css-loader%20style-loader%20-D%60%0A2.%20%E9%85%8D%E7%BD%AE%20%60moudle%60%20%E5%92%8C%20%60loader%60%20%E3%80%82%E8%AE%B0%E4%BD%8F%20loader%20%E7%9A%84%E6%89%A7%E8%A1%8C%E9%A1%BA%E5%BA%8F%20%E3%80%82%20%E4%BB%8E%E5%8F%B3%E5%90%91%E5%B7%A6%EF%BC%8C%E4%BB%8E%E4%B8%8A%E5%88%B0%E4%B8%8B%E3%80%82%0A3.%20%E5%90%8C%E6%A0%B7%E7%9A%84%20%E6%88%91%E4%BB%AC%E4%B9%9F%E5%8F%AF%E4%BB%A5%20%E9%85%8D%E7%BD%AE%20less%EF%BC%8C%E5%85%88%E5%AE%89%E8%A3%85%20less%20%E6%96%87%E4%BB%B6%20%60%20yarn%20add%20less%20less-loader%20-D%60%20%20%20%0A4.%20%E6%8A%BD%E7%A6%BBcss%E7%9A%84%E6%8F%92%E4%BB%B6%20%60%20yarn%20add%20%20mini-css-extract-plugin%60%20%20%E5%B9%B6%E5%8E%BB%20webpack.config.js%20%E4%B8%AD%E8%BF%9B%E8%A1%8C%E9%85%8D%E7%BD%AE%E3%80%82%0A5.%20%E4%B8%BAcss%20%E6%B7%BB%E5%8A%A0%E5%89%8D%E7%BC%80%20%60yarn%20add%20postcss-loader%20autoprefixer%20-D%60%20%0A6.%20%E5%86%8D%E5%8E%BB%E9%85%8D%E7%BD%AE%E4%B8%80%E4%B8%AA%20%20%60%20yarn%20add%20%20terser-webpack-plugin%20-D%60%20%0A7.%20%E8%BF%98%E6%9C%89%20%60%20yarn%20add%20optimize-css-assets-webpack-plugin%20-D%60%0A%0A%60%60%60%0Amodule%3A%C2%A0%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0rules%3A%C2%A0%5B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7B%20%2F%2F%20%E7%AC%AC%E4%B8%80%E4%B8%AA%E8%A7%84%E5%88%99%E6%98%AF%20CSS%E7%9A%84%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0test%3A%C2%A0%2F%5C.css%24%2F%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0use%3A%C2%A0%5B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0’style-loader’%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0’css-loader’%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%5D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7B%20%2F%2F%20%E8%BF%99%E6%98%AF%20less%20%E7%9A%84%E8%A7%84%E5%88%99%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0test%3A%C2%A0%2F%5C.less%24%2F%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0use%3A%C2%A0%5B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0loader%3A%C2%A0’style-loader’%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0options%3A%C2%A0%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0’css-loader’%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0’less-loader’%C2%A0%2F%2F%E5%85%88%E5%B0%86%C2%A0less%C2%A0%E8%BD%AC%E6%8D%A2%E6%88%90%C2%A0css%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%5D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%5D%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%60%60%60%0A%0A%23%23%23%23%2006.es6%E8%BD%AC%E5%8C%96%0A1.%20bable%20%60%20yarn%20%20add%20babel-loader%20%40babel%2Fcore%20%40babel%2Fpreset-env%20%20-D%60%0A2.%20ES7%20%20%60yarn%20add%20%40babel%2Fplugin-proposal-class-properties%20-D%60%0A3.%20JS%20%E8%A3%85%E9%A5%B0%E5%99%A8%20%60%20yarn%20add%20%40babel%2Fplugin-proposal-decorators%20-D%60%20%0A%0A%23%23%23%23%2007.%E5%A4%84%E7%90%86JS%E8%AF%AD%E6%B3%95%E5%8F%8A%E6%A0%A1%E9%AA%8C%0A%E5%85%B6%E5%AE%9E%20%60eslint%60%20%E8%BF%99%E7%A7%8D%E6%A3%80%E9%AA%8C%EF%BC%8C%E4%BD%BF%E7%94%A8%E8%B5%B7%E6%9D%A5%E5%A5%BD%E9%BA%BB%E7%83%A6%E7%9A%84%EF%BC%8C%E4%B9%9F%E4%BC%9A%E5%BD%B1%E5%93%8D%E6%95%88%E7%8E%87%E3%80%82%E5%83%8Fvscode%E8%BF%99%E6%A0%B7%E7%9A%84%E7%BC%96%E8%AF%91%E5%99%A8%E8%87%AA%E8%BA%AB%E4%B8%80%E8%88%AC%E9%83%BD%E4%BC%9A%E6%9C%89eslint%E6%8F%92%E4%BB%B6%EF%BC%8C%E6%B2%A1%E5%BF%85%E8%A6%81%E5%86%8D%E5%8E%BBwebpack%E9%85%8D%E7%BD%AE%0A1.%20%60yarn%20add%20%40babel%2Fplugin-transform-runtime%20-D%60%20%0A2.%20%60yarn%20add%20%40babel%2Fruntime%60%20%0A3.%20%60yarn%20add%20%40babel%2Fpolyfill%20%60%0A4.%20%60yarn%20add%20eslint%20eslint-loader%60%0A5.%20%60%20yarn%20eslint%20—init%60%20%20%E4%BC%9A%E5%88%9D%E5%A7%8B%E5%8C%96%E7%94%9F%E6%88%90%20%60.eslintrc.js%60%20%20%E6%96%87%E4%BB%B6%0A%0A%23%23%23%23%2008.%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F%E5%BC%95%E5%85%A5%E9%97%AE%E9%A2%98%0A%0A%E5%A6%82%E4%B8%8B%E9%9D%A2%E7%9A%84%E4%BE%8B%E5%AD%90%EF%BC%8C%E9%85%8D%E7%BD%AE%E5%AE%8C%E6%AF%95%E5%B0%B1%E4%B8%8D%E5%9C%A8%E9%9C%80%E8%A6%81%EF%BC%8C%E5%85%A8%E5%B1%80%20import%20%24%20from%20’jquery’%E4%B9%8B%E7%B1%BB%E7%9A%84%C2%B7%E8%BF%99%E7%A7%8D%E5%86%99%E6%B3%95%E3%80%82webpack%E5%B0%86%E8%87%AA%E5%8A%A8%E5%AF%BC%E5%85%A5jquery%0A%0A1.%20%60yarn%20add%20expose-loader%60%0A2.%20%20%60webpack.config.js%60%20%20%E4%B8%AD%E6%B7%BB%E5%8A%A0%E6%96%B0%E7%9A%84%E9%85%8D%E7%BD%AE%0A%60%60%60%0A%2F%2F%5B1%5D%20%E5%BC%95%E5%85%A5%E6%8F%92%E4%BB%B6%0Aconst%C2%A0webpack%C2%A0%3D%C2%A0require(‘webpack’)%3B%0A%0A%2F%2F%5B2%5D%E5%9F%BA%E6%9C%AC%E9%85%8D%E7%BD%AE%0Anew%C2%A0webpack.ProvidePlugin(%7B%0A%20%20%20%20%24%3A%C2%A0’jquery’%2C%0A%20%20%20%20jQuery%3A%C2%A0’jquery’%2C%0A%20%20%20%20window.jQuery’%3A%C2%A0’jquery’%2C%0A%20%20%20%20’window.%24’%3A%C2%A0’jquery’%2C%0A%C2%A0%7D)%2C%0A%20%0A%20%2F%2F%5B3%5D%E5%8D%83%E4%B8%87%E5%88%AB%E5%BF%98%E4%BA%86%EF%BC%8C%E6%9C%80%E5%90%8E%E8%BF%98%E8%A6%81%E5%8C%B9%E9%85%8D%E8%A7%84%E5%88%99%0A%7B%0A%20%20%20%20test%3A%C2%A0require.resolve(‘jquery’)%2C%0A%20%20%20%20use%3A%C2%A0%5B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bloader%3A%C2%A0’expose-loader’%2Coptions%3A%C2%A0’jQuery’%7D%2C%C2%A0%0A%20%20%20%20%20%20%20%20%20%20%20%20%7Bloader%3A%C2%A0’expose-loader’%2C%20options%3A%C2%A0’%24’%0A%20%20%20%20%20%7D%5D%0A%C2%A0%7D%2C%0A%60%60%60%0A%0A%23%23%23%23%2009.%E5%AF%B9%E5%9B%BE%E7%89%87%E7%9A%84%E6%94%AF%E6%8C%81%0A%0A9.1-%E7%AC%AC%E4%B8%80%E7%A7%8D%E6%96%B9%E5%BC%8F%20%E5%8A%A0%E8%BD%BD%E5%9B%BE%E7%89%87%0A%0A%3E%201.%E5%85%88%E4%BD%BF%E7%94%A8%20ES6%E7%9A%84%E6%96%B9%E6%B3%95%20%E5%B0%86%E5%9B%BE%E7%89%87%E5%AF%BC%E5%85%A5%20import%20addr_1%20from%20’.%2Fxx.png’%0A%3E%202.%E5%8E%9F%E7%94%9Fjs%20crete%20%E6%A0%87%E7%AD%BE%20appenChild()%20%E8%8A%82%E7%82%B9%E3%80%82%0A%3E%203.%E5%9C%A8%E5%89%8D%E4%B8%A4%E4%B8%AA%E6%AD%A5%E9%AA%A4%E4%B9%8B%E5%89%8D%20%E6%88%91%E4%BB%AC%E9%9C%80%E8%A6%81%20%E5%85%88%E5%8E%BB%20%60yarn%20add%20file-loader%60%20%20%E7%84%B6%E5%90%8E%E5%B0%8F%E5%B0%8F%E7%9A%84%E9%85%8D%E7%BD%AE%E4%B8%80%E4%B8%8B%E3%80%82%0A%3E%20%E5%85%B6%E5%AE%9E%E6%8F%92%E4%BB%B6%E5%B0%86%20%20file-loader%20addr_1%20%E8%BF%99%E4%B8%AA%E6%89%93%E5%8C%85%E5%90%8E%E7%9A%84%E5%9C%B0%E5%9D%80%E7%BB%99%E4%BA%86%E6%88%91%E4%BB%AC%EF%BC%8C……%0A%60%60%60%0A%7B%0A%20%20%20%20test%3A%C2%A0%2F%5C.(png%7Cjpg%7Cgif%7Cjpng)%24%2F%2C%0A%20%20%20%20use%3A%C2%A0%5B%7B%0A%20%20%20%20%20%20%20%20loader%3A%C2%A0’file-loader’%2C%0A%20%20%20%20%20%20%20%20options%3A%C2%A0%7B%7D%0A%20%20%20%20%7D%5D%0A%7D%2C%0A%60%60%60%0A%E9%A2%9D%E5%A4%96%E7%9A%84%E4%B8%A4%E4%B8%AAloader%20%0A%0A%60yarn%20add%20url-loader%20-D%60%20%0A%60yarn%20add%20html-withimg-loader%20-D%60%20%0A%0A9.2-%E7%AC%AC%E4%BA%8C%E7%A7%8D%E6%96%B9%E5%BC%8F%20%E5%8A%A0%E8%BD%BD%E5%9B%BE%E7%89%87%0A%E7%9B%B4%E6%8E%A5%20%E9%80%9A%E8%BF%87%20css-loader%20%E8%BF%99%E4%B8%AA%E6%8F%92%E4%BB%B6%EF%BC%8C%E5%9C%A8js%20%E6%96%87%E4%BB%B6%E4%B8%AD%E5%8E%BB%E5%BC%95%E5%85%A5%20import%20’.%2Fxxx.css’%20%E8%80%8C%E5%9C%A8css%E6%96%87%E4%BB%B6%E4%B8%AD%E7%9B%B4%E6%8E%A5%E4%BD%BF%E7%94%A8%E5%A6%82%20background%3Aurl(‘.%2Fxxx.jpg’)%0A%E5%9B%A0%E4%B8%BA%E8%B7%AF%E5%BE%84%E7%AD%89%E7%A7%8D%E7%A7%8D%E9%97%AE%E9%A2%98%EF%BC%8C%E6%9E%81%E5%85%B6%E5%AE%B9%E6%98%93%E6%8A%A5%E9%94%99…%20…%20(%E5%B7%B2%E6%88%90%E5%8A%9F%E9%85%8D%E7%BD%AE%E5%87%BA%E4%B8%80%E4%B8%AA)%0A%0A%209.3-%E7%AC%AC%E4%B8%89%E7%A7%8D%E6%96%B9%E5%BC%8F%20%E5%8A%A0%E8%BD%BD%E5%9B%BE%E7%89%87%0A%E4%BB%A5%E5%90%8E%E7%9C%8B%20…%20…%0A%0A%0A%23%23%23%23%2010.%E6%96%87%E4%BB%B6%E7%9A%84%E5%88%92%E5%88%86%0A%0A%E6%9C%89%E6%97%B6%E5%80%99%EF%BC%8C%E6%88%91%E4%BB%AC%E4%B8%8D%E6%83%B3%E8%A6%81%E6%89%93%E5%8C%85%E5%90%8E%E7%9A%84%E6%96%87%E4%BB%B6%E9%83%BD%E6%9D%82%E4%B9%B1%E6%97%A0%E7%AB%A0%E7%9A%84%E6%8E%92%E5%88%97%E5%9C%A8%E8%BE%93%E5%87%BA%E7%9A%84root%E7%9B%AE%E5%BD%95%E4%B8%8B%EF%BC%8C%E9%9C%80%E8%A6%81%E5%AF%B9%E6%96%87%E4%BB%B6%E8%BF%9B%E8%A1%8C%E5%88%92%E5%88%86%0A%0A%60%5BCSS%5D%60%0A%60%60%60%0Anew%C2%A0MiniCssExtractPlugin(%7B%20%2F%2FCSS%0A%20%20%20%20filename%3A%C2%A0%22css%2Fmain.css%22%0A%7D)%0A%60%60%60%0A%0A%60%20%5Bjs%5D%60%0A%60%60%60%0A%2F%2F%C2%A0filename%3A%C2%A0%22js%2Fboudle.%5Bhash%3A8%5D.js%22%2C%0A%20%20%20filename%3A%C2%A0%22js%2Fboudle.js%22%2C%0A%60%60%60%0A%0A%60%20%5Bimages%5D%60%0A%60%60%60%0AoutputPath%3A%C2%A0%22.%2Fimages%22%2C%C2%A0%2F%2F%C2%A0%E8%BE%93%E5%87%BA%E8%B7%AF%E5%BE%84%0A%60%60%60%0A%0A%E4%B9%9F%E5%8F%AF%E4%BB%A5%E8%AE%BE%E7%BD%AE%E6%9F%90%E4%B8%80%E9%A1%B9%2F%E5%85%B1%E5%90%8C%E7%9A%84%E6%96%87%E4%BB%B6%20%E5%85%AC%E5%85%B1%E8%B7%AF%E5%BE%84%0A%0A%60%60%60%0A%2F%2F%C2%A0publicPath%3A%C2%A0%22.%2Fimages%22%2C%0A%60%60%60%0A%0A%23%23%23%23%2011.%E5%A4%9A%E9%A1%B5%E9%9D%A2%E6%89%93%E5%8C%85%0A%0A%E8%AE%B0%E5%BD%95%E4%B8%80%E6%AC%A1%E5%AE%8C%E6%95%B4%E7%9A%84%E4%BE%8B%E5%AD%90-webpack-02%0A%0A1.%E5%88%9D%E5%A7%8B%E5%8C%96%E9%85%8D%E7%BD%AE%0A%E5%BB%BA%E7%AB%8B%E5%A6%82%E4%B8%8B%20%E6%96%87%E4%BB%B6%E7%BB%93%E6%9E%84%0A!%5B2957438d61e8368bf278f74750f4d798.png%5D(en-resource%3A%2F%2Fdatabase%2F3201%3A1)%0A%0A2.%20%E6%8F%92%E4%BB%B6%E5%AE%89%E8%A3%85%0A%3E%201.%20%60yarn%20init%20-y%60%0A%3E%202.%20%60yarn%20add%20webpack%20webpack%20-D%60%0A%3E%203.%20%60yarn%20add%20html-webpack-plugin%20-D%60%0A%0A3.%20webpack.config.js%20%E9%85%8D%E7%BD%AE%0A%60%60%60%0Aconst%C2%A0path%C2%A0%3D%C2%A0require(%22path%22)%3B%0Aconst%C2%A0HtmlWebpackPlugin%C2%A0%3D%C2%A0require(%22html-webpack-plugin%22)%3B%0Amodule.exports%C2%A0%3D%C2%A0%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0mode%3A%C2%A0’development’%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0entry%3A%C2%A0%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0index%3A%C2%A0’.%2Fsrc%2Fjs%2Findex.js’%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0other%3A%C2%A0’.%2Fsrc%2Fjs%2Fother.js’%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0output%3A%C2%A0%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0filename%3A%C2%A0’js%2F%5Bname%5D.js’%2C%2F%2F%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0path%3A%C2%A0path.resolve(__dirname%2C%C2%A0’dist’)%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0plugins%3A%5B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0new%C2%A0HtmlWebpackPlugin(%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0template%3A%C2%A0’.%2Fsrc%2Findex.html’%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0filename%3A’index.html’%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0chunks%3A%5B’index’%5D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D)%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0new%C2%A0HtmlWebpackPlugin(%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0template%3A%C2%A0’.%2Fsrc%2Fother.html’%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0filename%3A’other.html’%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0chunks%3A%5B’other’%5D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D)%0A%C2%A0%C2%A0%C2%A0%C2%A0%5D%0A%7D%3B%0A%60%60%60%0A%0A%23%23%23%23%2012.source-map%20%E9%85%8D%E7%BD%AE%0A%0A%E9%85%8D%E7%BD%AE%20source-map%20%E7%94%A8%E4%BA%8E%E8%B0%83%E8%AF%95%E6%BA%90%E7%A0%81%20%E8%AE%B0%E5%BD%95%E4%B8%80%E6%AC%A1%E5%AE%8C%E6%95%B4%E7%9A%84%E9%85%8D%E7%BD%AE%20webpack-03%0A%0A1.%E5%BB%BA%E7%AB%8B%E6%96%87%E4%BB%B6%E7%BB%93%E6%9E%84%0A%2B%20webpack-03%0A%20%20%20%20%2B%20src%0A%20%20%20%20%20%20%20%20%2B%20js%0A%20%20%20%20%20%20%20%20%20%20%20%20%2B%20index.js%0A%20%20%20%20%20%20%20%20%2B%20index.html%20%20%20%20%0A%20%20%20%20%2B%20webpack.config.js%20%20%20%20%20%20%20%0A%0A2.%E6%8F%92%E4%BB%B6%E5%AE%89%E8%A3%85%20%26%20%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA%0A%0A%2B%20%60yarn%20init%20-y%60%20%20——————%E6%96%87%E4%BB%B6%E5%88%9D%E5%A7%8B%E5%8C%96%0A%2B%20%60yarn%20add%20webpack%20webpack-cli%20-D%60%20%20—————-%20%E5%AE%89%E8%A3%85%20webpack%20%E5%92%8C%20webpack%20%E8%84%9A%E6%89%8B%E6%9E%B6%0A%2B%20%60yarn%20add%20webpack-dev-server%20-D%60%20—————-%E5%AE%89%E8%A3%85%20%E6%9C%AC%E5%9C%B0%E8%BF%90%E8%A1%8C%20server%0A%2B%20%60yarn%20add%20html-webpack-plugin%20-D%60%20——————%20%E5%AE%89%E8%A3%85%20html%20%E6%8F%92%E4%BB%B6%0A%2B%20%60yarn%20add%20%20%40babel%2Fcore%20%40babel%2Fpreset-env%20babel-loader%20-D%60%20%20—————%E5%AE%89%E8%A3%85%20babel%20%E9%AB%98%E7%BA%A7JS%E8%AF%AD%E6%B3%95%E8%BD%AC%E5%8C%96%0A%0A3.%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E7%9A%84%E8%A1%A5%E5%85%85%0A%0A%60%5Bpackage.json%5D%60%0A%60%60%60%0A%2F%2F%2B%2B%0A%22scripts%22%3A%C2%A0%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%22build%22%3A%C2%A0%22webpack%C2%A0—config%C2%A0webpack.config.js%22%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%22dev%22%3A%C2%A0%22webpack-dev-server%22%0A%C2%A0%C2%A0%7D%2C%0A%60%60%60%0A%0A%60%5Bwebpack.config.js%5D%60%0A%60%60%60%0A%0Aconst%C2%A0path%C2%A0%3D%C2%A0require(%22path%22)%3B%0Aconst%C2%A0HtmlWebpackPlugin%C2%A0%3D%C2%A0require(%22html-webpack-plugin%22)%3B%0Amodule.exports%C2%A0%3D%C2%A0%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0mode%3A%C2%A0’production’%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0entry%3A%C2%A0%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0index%3A%C2%A0’.%2Fsrc%2Fjs%2Findex.js’%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0module%3A%C2%A0%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0rules%3A%5B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0test%3A%C2%A0%2F%5C.js%24%2F%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0use%3A%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0loader%3A%C2%A0’babel-loader’%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0options%3A%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0presets%3A%C2%A0%5B’%40babel%2Fpreset-env’%5D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%5D%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0devtool%3A’source-map’%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0output%3A%C2%A0%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0filename%3A%C2%A0’js%2F%5Bname%5D.js’%2C%2F%2F%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0path%3A%C2%A0path.resolve(__dirname%2C%C2%A0’dist’)%0A%C2%A0%C2%A0%C2%A0%C2%A0%7D%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0plugins%3A%5B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0new%C2%A0HtmlWebpackPlugin(%7B%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0template%3A%C2%A0’.%2Fsrc%2Findex.html’%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0filename%3A’index.html’%2C%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0chunks%3A%5B’index’%5D%0A%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%7D)%0A%C2%A0%C2%A0%C2%A0%C2%A0%5D%0A%7D%3B%0A%60%60%60%0A%0A4.%E5%87%A0%E7%A7%8D%E9%85%8D%E7%BD%AE%0A%2B%201.%20source-map%20%20%E6%BA%90%E7%A0%81%E6%98%A0%E5%B0%84%E6%96%87%E4%BB%B6%E5%A4%A7%E8%80%8C%E5%85%A8%E3%80%82js%E5%87%BA%E9%94%99%E4%BC%9A%E6%A0%87%E8%AF%86%E6%BA%90%E4%BB%A3%E7%A0%81%E7%9A%84%E8%A1%8C%2C%E5%B9%B6%E7%B2%BE%E5%87%86%E5%AE%9A%E4%BD%8D%0A%2B%202.%20eval-source-map%20%E4%B8%8D%E4%BC%9A%E4%BA%A7%E7%94%9F%E5%8D%95%E7%8B%AC%E7%9A%84.map%20%E6%96%87%E4%BB%B6%EF%BC%8C%E4%BC%9A%E6%98%BE%E7%A4%BA%E5%87%BA%E9%94%99%E7%9A%84%E8%A1%8C%E5%92%8C%E5%88%97%0A%2B%203.%20cheap-module-source-map%EF%BC%8C%E4%BA%A7%E7%94%9F%E7%9A%84%E6%96%87%E4%BB%B6%20%E4%B8%8D%E6%98%AF%E5%85%B3%E8%81%94%E7%9A%84%0A%2B%204.%20cheap-module-eval-source-map%20%E4%B8%8D%E4%BA%A7%E7%94%9F%E6%96%87%E4%BB%B6%EF%BC%8C%E9%9B%86%E6%88%90%E6%89%93%E5%8C%85%E5%90%8E%E7%9A%84%E6%96%87%E4%BB%B6%E4%B8%AD%EF%BC%8C%E4%B8%8D%E4%BC%9A%E4%BA%A7%E7%94%9F%E8%A1%8C%E5%92%8C%E5%88%97%0A%0A%23%23%23%23%2013.watch%20%E4%BB%A3%E7%A0%81%E4%BF%AE%E6%94%B9%E5%90%8E%E7%9A%84%E7%9B%91%E6%8E%A7%0A%0A%E4%BB%85%E4%BB%85%E9%9C%80%E8%A6%81%E5%9C%A8%20webpack.config.js%20%E4%B8%AD%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%BA%9B%E9%85%8D%E7%BD%AE%0A%0A%60%60%60%0Awatch%3A%C2%A0true%2C%0AwatchOptions%3A%C2%A0%7B%0A%20%20%20%20poll%3A%C2%A01000%2C%C2%A0%2F%2F%E6%AF%8F%E7%A7%92%E9%97%AE%E6%88%91%E5%A4%9A%E5%B0%91%E6%AC%A1%0A%20%20%20%20aggregateTimeout%3A%C2%A0500%2C%C2%A0%2F%2F%E9%98%B2%E6%8A%96%C2%A0%E8%BE%93%E5%85%A5500ms%C2%A0%E5%81%9C%E6%AD%A2%E5%90%8E%E4%BB%A3%E7%A0%81%E6%9B%B4%E6%96%B0%E5%90%8E%0A%20%20%20%20ignored%3A%C2%A0%2Fnode_modules%2F%C2%A0%2F%2F%E4%B8%8D%E9%9C%80%E8%A6%81%E8%BF%9B%E8%A1%8C%E7%9B%91%E6%8E%A7%E7%9A%84%E6%96%87%E4%BB%B6%E5%A4%B9%0A%7D%2C%0A%60%60%60%0A%0A%23%23%23%23%2014.%E4%B8%89%E4%B8%AA%E5%9F%BA%E6%9C%AC%E7%9A%84%20webpack%E6%8F%92%E4%BB%B6%0A%0A%E5%AE%8C%E6%95%B4%E4%BE%8B%E5%AD%90-%20%60webpack-04%60%0A%0A14.1%20clean-webpack-plugin%0A%3E%20%E4%BD%9C%E7%94%A8%EF%BC%9A%E6%AF%8F%E6%AC%A1%E6%89%93%E5%8C%85%E6%96%87%E4%BB%B6%E6%97%B6%EF%BC%8C%E5%88%A0%E9%99%A4%E4%B8%8A%E4%B8%80%E6%AC%A1%E7%9A%84%E6%97%A7%E7%9A%84%E6%96%87%E4%BB%B6%E5%A4%B9%EF%BC%8C%E6%89%93%E5%8C%85%E5%87%BA%E6%9C%80%E6%96%B0%E7%9A%84%E4%B8%80%E4%BB%BD%E6%96%87%E4%BB%B6%E5%A4%B9%E3%80%82%0A%3E%20%E5%85%88%E5%AE%89%E8%A3%85%20%EF%BC%9A%60yarn%20add%20clean-webpack-plugin%20-D%60%20%0A%3E%20%E5%86%8D%E9%85%8D%E7%BD%AE%20%EF%BC%9A%E6%B3%A8%E6%84%8F%E7%89%88%E6%9C%AC%E9%97%AE%E9%A2%98%EF%BC%8C%E4%BD%BF%E7%94%A8%E6%9C%80%E6%96%B0%E7%9A%84%E5%86%99%E6%B3%95%EF%BC%8C%E5%91%B5%E5%91%B5%0A%0A%60%60%60%0Aconst%C2%A0%7B%C2%A0CleanWebpackPlugin%C2%A0%7D%C2%A0%3D%C2%A0require(‘clean-webpack-plugin’)%3B%20%2F%2F%E5%BC%95%E5%85%A5%E6%8F%92%E4%BB%B6%0A%0Anew%C2%A0CleanWebpackPlugin()%2C%20%2F%2Fplugin%20%E4%B8%AD%E6%B7%BB%E5%8A%A0%0A%60%60%60%0A%0A14.2%20copy-webpack-plugin%0A%3E%E4%BD%9C%E7%94%A8%EF%BC%9A%E6%96%87%E4%BB%B6%E8%B5%84%E6%BA%90%E7%9A%84%E6%8B%B7%E8%B4%9D%0A%3E%E5%85%88%E5%AE%89%E8%A3%85%20%EF%BC%9A%60yarn%20add%20copy-webpack-plugin%20-D%60%20%0A%0A%60%60%60%0Aconst%C2%A0CopyWebpackPlugin%C2%A0%3D%C2%A0require(‘copy-webpack-plugin’)%3B%20%2F%2F%E5%BC%95%E5%85%A5%E6%8F%92%E4%BB%B6%0A%0Anew%C2%A0CopyWebpackPlugin(%5B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20from%3A%C2%A0dirname%C2%A0%2B%C2%A0’%2Fpublic%2Flib’%2C%0A%20%20%20%20%20%20%20%20to%3A%C2%A0dirname%C2%A0%2B%C2%A0’%2Fdist%2Flib’%0A%20%20%20%20%7D%EF%BC%8C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%2F%2F%E5%8F%AF%E9%85%8D%E7%BD%AE%E5%A4%9A%E4%B8%AA%E5%AF%B9%E8%B1%A1%0A%20%20%20%20%7D%0A%5D)%2C%0A%60%60%60%0A%0A14.3%20banner-plugin%20**%0A%3E%20%E4%BD%9C%E7%94%A8%EF%BC%9A%E6%89%93%E5%8C%85%E5%90%8E%E7%9A%84js%20%EF%BC%8C%E6%96%87%E4%BB%B6%E5%A4%B4%20%E7%94%9F%E6%88%90%E6%A0%87%E6%B3%A8%E4%BF%A1%E6%81%AF%20%E5%A6%82’xxx%20%20in%20maded’%0A%3E%20%E8%BF%99%E4%B8%AA%E6%8F%92%E4%BB%B6%E5%BC%8F%20webpack%E7%9A%84%E5%86%85%E7%BD%AE%E6%8F%92%E4%BB%B6%EF%BC%8C%E6%97%A0%E9%9C%80%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%AE%89%E8%A3%85%E3%80%82%0A%0A%0A%60%60%60%0Aconst%C2%A0webpack%C2%A0%3D%C2%A0require(‘webpack’)%3B%20%2F%2F%E5%85%88%E5%BC%95%E5%85%A5%20webpack%0A%0Anew%C2%A0webpack.BannerPlugin(‘Alex%C2%A0wrote%C2%A0in%C2%A0September%C2%A02019.9’)%3B%20%2F%2F%E5%86%8D%E5%8E%BB%E9%85%8D%E7%BD%AE%E5%AE%83%E3%80%82%0A%60%60%60%0A