溜_x_i_a_o_迪
溜_x_i_a_o_迪

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）

文章目录

  • 1. 重点提炼
  • 2. 配置环境
  • 3. Plugins（插件）
    • 3.1 HtmlWebpackPlugin
      • 3.1.1 example01
        • 3.1.1.1 example01-1
        • 3.1.1.2 example01-2
        • 3.1.1.3 example01-3
        • 3.1.1.4 example01-4
          • 3.1.1.4.1 Minification
          • 3.1.1.4.2 demo
        • 3.1.1.5 example01-5
    • 3.2 clean-webpack-plugin
      • 3.2.1 example02
    • 3.3 mini-css-extract-plugin
      • 3.3.1 example03
        • 3.3.1.1 example03-1
        • 3.3.1.2 example03-2
  • 4. sourceMap（源文件映射）
    • 4.1 example04
      • 4.1.1 example04-1
      • 4.1.2 example04-2
      • 4.1.3 example04-3
    • 4.2 扩展
      • 4.2.1 对于生产环境
      • 4.2.2 特定场景
        • 4.2.2.1 example05
  • 5. WebpackDevServer
    • 5.1 example06
      • 5.1.1 example06-1
      • 5.1.2 example06-2
    • 5.2 Proxy
    • 5.3 example07
      • 5.3.1 example07-1
      • 5.3.2 example07-2
      • 5.3.3 example07-3
  • 6. Hot Module Replacement（模块热替换<局部更新>）
    • 6.1 引例
    • 6.2 css热更新
    • 6.3 react 热更新
    • 6.4 vue 热更新
    • 6.5 example08
      • 6.5.1 example08-1
      • 6.5.2 example08-2

1. 重点提炼

  • webpack
  • plugins
    • HtmlWebpackPlugin：辅助生成html
    • clean-webpack-plugin ：清除构建目录
    • mini-css-extract-plugin ： css提取
  • sourceMap
    • dev-tool
  • WebpackDevServer：本地服务器
    • Proxy：代理配置
  • Hot Module Replacement：热更新
    • live reload
    • HMR 的 API：热更新接口

2. 配置环境

npm init -y

npm i webpack webpack-cli

\test01\package.json ：加入启动简化的命令

{
  "name": "test01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "devDependencies": {
    "raw-loader": "^4.0.1"
  }
}

新建webpack.config.js的webpack的配置文件。

测试一下环境：

\test01\src\data\test.txt

测试数据

\test01\src\test.js

import data from './data/test.txt';
 
console.log(data);

\test01\html\1.test.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
 
<script src="../dist/test.js">script>
 
body>
html>

\test01\webpack.config.js

const path = require('path');
 
module.exports = {
 
    mode: 'development',
    entry: {
        'test': './src/test.js',
    },
    output: {
        // 这个路径是默认会被加入 devServer 的 contentBase 中
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].js"
    },
        module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            }
        ]
    },
};

npm install --save-dev raw-loader
npm start

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第1张图片

测试成功！

image-20200616174550762

参考：https://github.com/6xiaoDi/blog-Webpack/tree/a0.19
Branch： branch01

commit description：a0.19（Webpack03配置并测试Webpack环境）
tag：a0.19

3. Plugins（插件）

扩展 webpack 本身的一些功能，它们会运行在各种模块解析完成以后（相当于loader解析完成后，在打包编译之前）的打包编译阶段，比如对解析后的模块文件进行压缩等都可以利用插件的形式进行实现。

3.1 HtmlWebpackPlugin

在打包结束后，⾃动生成⼀个 html 文件，并把打包生成的 js模块引⼊到该 html 中，其实在上一篇当中提过，如Vue、React的模板文件放在当前的html的文件夹中，其实我们最终的希望的是src目录下的所有模块全部打包放在dist目录下，同时html文件下的文件们也放入在dist目录下，这样所有需要在服务器上运行的文件我们都通通都组织在dist目录下了，而不再是分散在各个文件夹下了，然后一个个去组织，这样太麻烦了，我们就可以通过当前插件的方式做到这种效果。

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

npm install --save-dev html-webpack-plugin

// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    ...
  plugins: [
     new HtmlWebpackPlugin({
       title: "My App",
       filename: "app.html",
       template: "./src/html/index.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>
head>
<body>
    <h1>html-webpack-pluginh1>
body>
html>

在 html 模板中，可以通过 <%=htmlWebpackPlugin.options.XXX%> 的方式获取配置的值

更多的配置

  • title: ⽤来生成⻚面的 title 元素
  • filename: 输出的 HTML ⽂件名，默认是 index.html， 也可以直接配置子目录
  • template: 模板⽂件路径，⽀持加载器（loader），⽐如 html!./index.html
  • inject: true | 'head' | 'body' | false，注⼊所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部（默认注入在body里），'head' 将放置到 head 元素中
  • favicon: 添加特定的 favicon 路径到输出的 HTML 文件中
  • minify: {} | false， 传递 html-minifier 选项给 minify 输出
  • hash: true | false，如果为 true，将添加 webpack 编译生成的 hash 到所有包含的脚本和 CSS ⽂件，对于解除 cache 很有用
  • cache: true | false，如果为 true，这是默认值，仅在文件修改之后才会发布文件
  • showErrors: true | false，如果为 true，这是默认值，错误信息会写入到 HTML ⻚面中
  • chunks: 允许只添加某些块 (⽐如，仅 unit test 块)
  • chunksSortMode: 允许控制块在添加到⻚面之前的排序方式，⽀持的值:'none' | 'default' |{function}-default:'auto'
  • excludeChunks: 允许跳过某些块，(⽐如，跳过单元测试的块)

3.1.1 example01

HtmlWebpackPlugin应用。

3.1.1.1 example01-1

安装插件

npm install --save-dev html-webpack-plugin

\test01\src\template.js

console.log('template');

通常在这里我们需要引用template.js文件，这里我们完全利用webpack去处理。

\test01\html\template.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
 
 
body>
html>

\test01\webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
 
module.exports = {
 
    mode: 'development',
 
    entry: {
        // 'test': './src/test.js',
 
        'template': './src/template.js'
    },
    output: {
        // 这个路径是默认会被加入 devServer 的 contentBase 中
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].js"
    },
 
 
    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            }
        ]
    },
 
    plugins: [
        new HtmlWebpackPlugin({
            // 模板文件存放的目录
            template: "./html/template.html",
            // 生成（打包）后的html存放目录
            filename: "app.html"
        }),
    ],
};

npm start

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第2张图片

打包后，我们看dist目录，首先template.js被移动过来了，template.html重命名为app.html被移动过来了。

image-20200616181741471

生成后的app.html会自动帮助我们插入script标签，src则自动引入入口文件（打包后的template.js，设置几个入口文件就会一并打包进去），插件就帮助我们处理，我们无需处理，因此项目中的往html引入css、js都可通过这种方式进行处理。

模板是不需要进行模块化处理的，所有没有放入loader里处理，而是在最后所有loader处理完毕，模块解析完毕后，紧接着在输出的时候把该文件带着一起输出过去了。


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
 
<script src="template.js">script>body>
html>

参考：https://github.com/6xiaoDi/blog-Webpack/tree/a0.20
Branch： branch01

commit description：a0.20（Webpack03——example01-1使用HtmlWebpackPlugin插件生成html自动引入js）
tag：a0.20

3.1.1.2 example01-2

假设有多个html模板（不止一个首页），怎么弄？仔细观察文档的配置项，**filename和template**都是字符串类型，既不是数组也不是对象，配置项肯定是不允许多个html的，仅能代表一个，除非支持逗号分隔。

我们尝试一下：

可以参考一下官网

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第3张图片

以上是配置项没做过多说明，但是下面demo中就有说明：

Generating Multiple HTML Files

To generate more than one HTML file, declare the plugin more than once in your plugins array

要生成多个HTML文件，请在插件数组中多次声明该插件

webpack.config.js

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(), // Generates default index.html
    new HtmlWebpackPlugin({  // Also generate a test.html
      filename: 'test.html',
      template: 'src/assets/test.html'
    })
  ]
}

\test01\html\template1.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
 
 
 
body>
html>

\test01\webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
 
module.exports = {
 
    mode: 'development',
    entry: {
        // 'test': './src/test.js',
 
        'template': './src/template.js'
    },
    output: {
        // 这个路径是默认会被加入 devServer 的 contentBase 中
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].js"
    },
 
 
    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            }
        ]
    },
 
    plugins: [
        new HtmlWebpackPlugin({
            // 模板文件存放的目录
            template: "./html/template.html",
            // 生成（打包）后的html存放目录
            filename: "app.html"
        }),
        new HtmlWebpackPlugin({
            // 模板文件存放的目录
            template: "./html/template1.html",
            // 生成（打包）后的html存放目录
            filename: "app1.html"
        }),
    ],
};

npm start

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第4张图片

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第5张图片

\test01\dist\app1.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
 
 
 
<script src="template.js">script>body>
html>

参考：https://github.com/6xiaoDi/blog-Webpack/tree/a0.21
Branch： branch01

commit description：a0.21（Webpack03——example01-2使用HtmlWebpackPlugin插件生成多个html自动引入js）
tag：a0.21

3.1.1.3 example01-3

除此之外，还可以往模板中注入变量，即往模板中注入数据（具体参考3.1注入说明），如设置一个title，可在模板中使用该变量作为标题。

\test01\webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
 
module.exports = {
 
    mode: 'development',
    // mode: 'production',
    entry: {
        // 'test': './src/test.js',
 
        'template': './src/template.js'
    },
    output: {
        // 这个路径是默认会被加入 devServer 的 contentBase 中
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].js"
    },
 
 
    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            }
        ]
    },
 
    plugins: [
        new HtmlWebpackPlugin({
            title: "My App",
            // 模板文件存放的目录
            template: "./html/template.html",
            // 生成（打包）后的html存放目录
            filename: "app.html"
        })
    ],
};

\test01\html\template.html


<html lang="en">
<head>
    <meta charset="UTF-8">

    <title><%=htmlWebpackPlugin.options.title%>title>
head>
<body>
 
 
body>
html>

npm start

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第6张图片

\test01\dist\app.html


<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>My Apptitle>
head>
<body>
 
<script src="template.js">script>body>
html>

参考：https://github.com/6xiaoDi/blog-Webpack/tree/a0.22
Branch： branch01

commit description：a0.22（Webpack03——example01-3使用HtmlWebpackPlugin插件引入title变量）
tag：a0.22

在 html 模板中，可以通过 <%=htmlWebpackPlugin.options.XXX%> 的方式获取配置的值

更多的配置

  • title: ⽤来生成⻚面的 title 元素
  • filename: 输出的 HTML ⽂件名，默认是 index.html， 也可以直接配置子目录
  • template: 模板⽂件路径，⽀持加载器（loader），⽐如 html!./index.html
  • inject: true | 'head' | 'body' | false，注⼊所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部（默认注入在body里），'head' 将放置到 head 元素中
  • favicon: 添加特定的 favicon（网页图标） 路径到输出的 HTML 文件中
  • minify（压缩）: {} | false， 传递 html-minifier 选项给 minify 输出
  • hash: true | false，如果为 true，将添加 webpack 编译生成的 hash 到所有包含的脚本和 CSS ⽂件，对于解除 cache 很有用
  • cache: true | false，如果为 true，这是默认值，仅在文件修改之后才会发布文件
  • showErrors: true | false，如果为 true，这是默认值，错误信息会写入到 HTML ⻚面中
  • chunks: 允许只添加某些块 (⽐如，仅 unit test 块)
  • chunksSortMode: 允许控制块在添加到⻚面之前的排序方式，⽀持的值:'none' | 'default' |{function}-default:'auto'
  • excludeChunks: 允许跳过某些块，(⽐如，跳过单元测试的块)

3.1.1.4 example01-4

压缩html

image-20200616232757329

3.1.1.4.1 Minification

If the minify option is set to true (the default when webpack’s mode is 'production'), the generated HTML will be minified using html-minifier-terser and the following options:

如果将minify选项设置为true（当webpack的模式为“生产”时为默认值），则将使用html-minifier-terser和以下选项来缩小生成的HTML：

{
 collapseWhitespace: true, // 折叠有助于文档树中文本节点的空白
                removeComments: true, // 删除HTML注释
                removeRedundantAttributes: true, // 当值匹配默认值时删除属性。
                removeScriptTypeAttributes: true, // type="text/javascript"从script标签中删除。其他type属性值保持不变
                removeStyleLinkTypeAttributes: true, // type="text/css"从style和link标签中删除。其他type属性值保持不变
                useShortDoctype: true // doctype用短（HTML5）文档类型替换
}

To use custom html-minifier options pass an object to minify instead. This object will not be merged with the defaults above.

要使用自定义html-minifier选项，请通过传递一个对象来缩小。该对象不会与上面的默认值合并。

To disable minification during production mode set the minify option to false.

要在生产模式下禁用压缩，请将minify选项设置为false。

3.1.1.4.2 demo

安装

npm install html-minifier-terser

demo01\webpack-demo02\webpack.config.js

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

module.exports = {

    mode: 'development',

    entry: {
        // 'test': './src/test.js',

        'template': './src/template.js'
    },
    output: {
        // 这个路径是默认会被加入 devServer 的 contentBase 中
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].js"
    },


    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            title: "My App",
            // 模板文件存放的目录
            template: "./html/template.html",
            // 生成（打包）后的html存放目录
            filename: "app.html",
            minify: {
                collapseWhitespace: true, // 折叠有助于文档树中文本节点的空白
                removeComments: true, // 删除HTML注释
                removeRedundantAttributes: true, // 当值匹配默认值时删除属性。
                removeScriptTypeAttributes: true, // type="text/javascript"从script标签中删除。其他type属性值保持不变
                removeStyleLinkTypeAttributes: true, // type="text/css"从style和link标签中删除。其他type属性值保持不变
                useShortDoctype: true // doctype用短（HTML5）文档类型替换
            },
        }),
        // new HtmlWebpackPlugin({
        //     // 模板文件存放的目录
        //     template: "./html/template1.html",
        //     // 生成（打包）后的html存放目录
        //     filename: "app1.html"
        // }),
    ],
};

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第7张图片

npm start

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第8张图片

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第9张图片

参考：https://github.com/6xiaoDi/blog-Webpack/tree/a0.23
Branch： branch01

commit description：a0.23（Webpack03——example01-4-demo使用HtmlWebpackPlugin插件配置minify=>压缩html文件）
tag：a0.23

3.1.1.5 example01-5

如果想在dist下将js输出到另一个目录：

    output: {
        // 这个路径是默认会被加入 devServer 的 contentBase 中
        path: path.resolve(__dirname, 'dist/js'),
        filename: "[name].js"
    }

output中设置的path可能会影响后续的loader及plugins中所有打包输出的路径，即很多情况下loader及plugins都以Webpack中的output中的path为基准路径，这点尤为重要，小心出错。

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第10张图片

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第11张图片

如果想输出不同的路径，我们再filename就行配置。

\test01\webpack.config.js

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

module.exports = {

    mode: 'development',

    entry: {
        // 'test': './src/test.js',

        'template': './src/template.js'
    },
    output: {
        // 这个路径是默认会被加入 devServer 的 contentBase 中
        path: path.resolve(__dirname, 'dist'),
        // filename: "[name].js"
        filename: "./public/js/[name].js"
    },


    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            title: "My App",
            // 模板文件存放的目录
            template: "./html/template.html",
            // 生成（打包）后的html存放目录
            filename: "app.html",
            minify: {
                collapseWhitespace: true, // 折叠有助于文档树中文本节点的空白
                removeComments: true, // 删除HTML注释
                removeRedundantAttributes: true, // 当值匹配默认值时删除属性。
                removeScriptTypeAttributes: true, // type="text/javascript"从script标签中删除。其他type属性值保持不变
                removeStyleLinkTypeAttributes: true, // type="text/css"从style和link标签中删除。其他type属性值保持不变
                useShortDoctype: true // doctype用短（HTML5）文档类型替换
            },
        }),
        // new HtmlWebpackPlugin({
        //     // 模板文件存放的目录
        //     template: "./html/template1.html",
        //     // 生成（打包）后的html存放目录
        //     filename: "app1.html"
        // }),
    ],
};

npm start

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第12张图片

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第13张图片

参考：https://github.com/6xiaoDi/blog-Webpack/tree/a0.24
Branch： branch01

commit description：a0.24（Webpack03——example01-5-使用HtmlWebpackPlugin插件配置文件的自定义dist下的目录）
tag：a0.24

注意：使用框架react、vue、angular都会基础配置默认配置好（脚手架工具）。

3.2 clean-webpack-plugin

删除（清理之前的构建目录）构建目录

npm install --save-dev clean-webpack-plugin

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    ...
  plugins: [
    ...,
    new CleanWebpackPlugin(),
    ...
  ]
}

3.2.1 example02

\test01\webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {

    mode: 'development',

    entry: {
        // 'test': './src/test.js',

        'template': './src/template.js'
    },
    output: {
        // 这个路径是默认会被加入 devServer 的 contentBase 中
        path: path.resolve(__dirname, 'dist'),
        // filename: "[name].js"
        filename: "./public/js/[name].js"
    },


    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            title: "My App",
            // 模板文件存放的目录
            template: "./html/template.html",
            // 生成（打包）后的html存放目录
            filename: "app.html",
            minify: {
                collapseWhitespace: true, // 折叠有助于文档树中文本节点的空白
                removeComments: true, // 删除HTML注释
                removeRedundantAttributes: true, // 当值匹配默认值时删除属性。
                removeScriptTypeAttributes: true, // type="text/javascript"从script标签中删除。其他type属性值保持不变
                removeStyleLinkTypeAttributes: true, // type="text/css"从style和link标签中删除。其他type属性值保持不变
                useShortDoctype: true // doctype用短（HTML5）文档类型替换
            },
        }),
        // new HtmlWebpackPlugin({
        //     // 模板文件存放的目录
        //     template: "./html/template1.html",
        //     // 生成（打包）后的html存放目录
        //     filename: "app1.html"
        // }),
        new CleanWebpackPlugin(),
    ],
};

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第14张图片

npm start

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第15张图片

参考：https://github.com/6xiaoDi/blog-Webpack/tree/a0.25
Branch： branch01

commit description：a0.25（Webpack03——example02-使用clean-webpack-plugin插件删除（清理之前的构建目录）构建目录）
tag：a0.25

3.3 mini-css-extract-plugin

提取 CSS 到一个单独的文件中

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

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    ...,
  module: {
      rules: [
          {
              test: /\.s[ac]ss$/,
              use: [
                  {
                      loader: MiniCssExtractPlugin.loader
                    },
          'css-loader',
          'sass-loader'
        ]
            }
      ]
    },
  plugins: [
    ...,
    new MiniCssExtractPlugin({
        filename: '[name].css'
    }),
    ...
  ]
}

3.3.1 example03

3.3.1.1 example03-1

\test01\src\css\index.css

body {
    background: red;
}

\test01\src\template.js

import './css/index.css';
 
console.log('template');

\test01\webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

module.exports = {

    mode: 'development',

    entry: {
        // 'test': './src/test.js',

        'template': './src/template.js'
    },
    output: {
        // 这个路径是默认会被加入 devServer 的 contentBase 中
        path: path.resolve(__dirname, 'dist'),
        // filename: "[name].js"
        filename: "./public/js/[name].js"
    },


    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            },

            {
                test: /\.css$/,
                use: ["style-loader","css-loader"]
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            title: "My App",
            // 模板文件存放的目录
            template: "./html/template.html",
            // 生成（打包）后的html存放目录
            filename: "app.html",
            minify: {
                collapseWhitespace: true, // 折叠有助于文档树中文本节点的空白
                removeComments: true, // 删除HTML注释
                removeRedundantAttributes: true, // 当值匹配默认值时删除属性。
                removeScriptTypeAttributes: true, // type="text/javascript"从script标签中删除。其他type属性值保持不变
                removeStyleLinkTypeAttributes: true, // type="text/css"从style和link标签中删除。其他type属性值保持不变
                useShortDoctype: true // doctype用短（HTML5）文档类型替换
            },
        }),
        // new HtmlWebpackPlugin({
        //     // 模板文件存放的目录
        //     template: "./html/template1.html",
        //     // 生成（打包）后的html存放目录
        //     filename: "app1.html"
        // }),
        new CleanWebpackPlugin(),
    ],
};

npm install --save-dev css-loader

npm install --save-dev style-loader

npm start

运行\test01\dist\app.html

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第16张图片

我们不希望通过js的方式生成style标签，希望把样式文件单独拿出来，放在dist目录下面的public的css目录里面，然后被引用。

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第17张图片

参考：https://github.com/6xiaoDi/blog-Webpack/tree/a0.26
Branch： branch01

commit description：a0.26（Webpack03——example03-1-使用"style-loader","css-loader"只能是引入style属性，而不是引入css文件了）
tag：a0.26

3.3.1.2 example03-2

我们需要安装mini-css-extract-plugin插件

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

并且会用到MiniCssExtractPlugin.loader，去掉style-loader

\test01\webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

    mode: 'development',

    entry: {
        // 'test': './src/test.js',

        'template': './src/template.js'
    },
    output: {
        // 这个路径是默认会被加入 devServer 的 contentBase 中
        path: path.resolve(__dirname, 'dist'),
        // filename: "[name].js"
        filename: "./public/js/[name].js"
    },


    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            },

            {
                test: /\.css$/,
                // use: ["style-loader","css-loader"]
                // 不希望通过js的方式生成style标签，因此不需要"style-loader",
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    "css-loader"
                ]
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            title: "My App",
            // 模板文件存放的目录
            template: "./html/template.html",
            // 生成（打包）后的html存放目录
            filename: "app.html",
            minify: {
                collapseWhitespace: true, // 折叠有助于文档树中文本节点的空白
                removeComments: true, // 删除HTML注释
                removeRedundantAttributes: true, // 当值匹配默认值时删除属性。
                removeScriptTypeAttributes: true, // type="text/javascript"从script标签中删除。其他type属性值保持不变
                removeStyleLinkTypeAttributes: true, // type="text/css"从style和link标签中删除。其他type属性值保持不变
                useShortDoctype: true // doctype用短（HTML5）文档类型替换
            },
        }),
        // new HtmlWebpackPlugin({
        //     // 模板文件存放的目录
        //     template: "./html/template1.html",
        //     // 生成（打包）后的html存放目录
        //     filename: "app1.html"
        // }),
        new CleanWebpackPlugin(),
        // 设置css提取路径
        new MiniCssExtractPlugin({
            filename: './public/css/[name].css'
        })
    ],
};

npm start

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第18张图片

\test01\dist\app.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Apptitle>
    <link href="./public/css/template.css" rel="stylesheet">
head>
<body>
<script src="./public/js/template.js">script>
body>
html>

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第19张图片

参考：https://github.com/6xiaoDi/blog-Webpack/tree/a0.27
Branch： branch01

commit description：a0.27（Webpack03——example03-2-使用mini-css-extract-plugin插件发布后引入css文件了）
tag：a0.27

更多细节参看文档：

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第20张图片

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第21张图片

注意：webpack更新地很快，别死记硬背，变化会非常地快，如果出现问题，一定要关注版本问题，同一个插件可能因为版本不同，导致不同的结果，兼容性有很大的问题。

4. sourceMap（源文件映射）

涉及打包编译，一定会用到它，翻译过来就是源文件映射，实际上我们新建的src目录就是源文件，而dist目录就是打包发布文件。

我们发布后的文件与开发的源文件是千差万别的，运行的时候万一报错，找这个错，是十分困难的。

我们实际运行在浏览器的代码是通过 webpack 打包合并甚至是压缩混淆过的代码，所生成的代码并不利于我们的调试和错误定位，我们可以通过 sourceMap 来解决这个问题，sourceMap 本质是一个记录了编译后代码与源代码的映射关系的文件，我们可以通过 webpack 的 devtool 选项来开启 sourceMap

module.exports = {
  mode: 'production',
 
  ...
}

首先，编译后会为每一个编译文件生成一个对应的 .map 文件，同时在编译文件中添加一段对应的 map 文件引入代码

...
//# sourceMappingURL=xx.js.map

...
/*# sourceMappingURL=xx.css.map*/

同时，现代浏览器都能够识别 sourceMap 文件，如 chrome，会在 Sources 面板中显示根据编译文件与对应的 map 文件定位到源文件中，有利于我们的调试和错误定位

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第22张图片

4.1 example04

4.1.1 example04-1

\test01\src\fn.js

export default function() {
    console.lo('fn........dsdsds');
}

\test01\src\template.js

import fn from './fn';
import './css/index.css';
 
console.log('template');
 
document.onclick = async function() {
    fn();
};

\test01\webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

    // mode: 'development',
    mode: 'production',

    entry: {
        // 'test': './src/test.js',

        'template': './src/template.js'
    },
    output: {
        // 这个路径是默认会被加入 devServer 的 contentBase 中
        path: path.resolve(__dirname, 'dist'),
        // filename: "[name].js"
        filename: "./public/js/[name].js"
    },


    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            },

            {
                test: /\.css$/,
                // use: ["style-loader","css-loader"]
                // 不希望通过js的方式生成style标签，因此不需要"style-loader",
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    "css-loader"
                ]
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            title: "My App",
            // 模板文件存放的目录
            template: "./html/template.html",
            // 生成（打包）后的html存放目录
            filename: "app.html",
            minify: {
                collapseWhitespace: true, // 折叠有助于文档树中文本节点的空白
                removeComments: true, // 删除HTML注释
                removeRedundantAttributes: true, // 当值匹配默认值时删除属性。
                removeScriptTypeAttributes: true, // type="text/javascript"从script标签中删除。其他type属性值保持不变
                removeStyleLinkTypeAttributes: true, // type="text/css"从style和link标签中删除。其他type属性值保持不变
                useShortDoctype: true // doctype用短（HTML5）文档类型替换
            },
        }),
        // new HtmlWebpackPlugin({
        //     // 模板文件存放的目录
        //     template: "./html/template1.html",
        //     // 生成（打包）后的html存放目录
        //     filename: "app1.html"
        // }),
        new CleanWebpackPlugin(),
        // 设置css提取路径
        new MiniCssExtractPlugin({
            filename: './public/css/[name].css'
        })
    ],
};

npm start

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第23张图片

很难定位到错误位置！！！并且时常报错也不是很准确！

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第24张图片

参考：https://github.com/6xiaoDi/blog-Webpack/tree/a0.28
Branch： branch01

commit description：a0.28（Webpack03——example04-1-发布模式下打包后代码有问题，很难定位到源文件）
tag：a0.28

4.1.2 example04-2

那如何根据这个报错，找到源文件出错位置呢？

这个时候就需要sourceMap了。

\test01\webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
module.exports = {
 
    //mode: 'development',
    mode: 'production',
    devtool: 'source-map',
    
    entry: {
        // 'test': './src/test.js',
 
        'template': './src/template.js'
    },
    output: {
        // 这个路径是默认会被加入 devServer 的 contentBase 中
        path: path.resolve(__dirname, 'dist'),
        // filename: "[name].js"
        filename: "./public/js/[name].js"
    },
 
 
    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            },
 
            {
                test: /\.css$/,
                // use: ["style-loader","css-loader"]
                // 不希望通过js的方式生成style标签，因此不需要"style-loader",
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    "css-loader"
                ]
            }
        ]
    },
 
    plugins: [
        new HtmlWebpackPlugin({
            title: "My App",
            // 模板文件存放的目录
            template: "./html/template.html",
            // 生成（打包）后的html存放目录
            filename: "app.html",
            minify: true
        }),
        // new HtmlWebpackPlugin({
        //     // 模板文件存放的目录
        //     template: "./html/template1.html",
        //     // 生成（打包）后的html存放目录
        //     filename: "app1.html"
        // }),
 
        new CleanWebpackPlugin(),
        // 设置css提取路径
        new MiniCssExtractPlugin({
            filename: './public/css/[name].css'
        })
    ],
};

npm start

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第25张图片

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第26张图片

\test01\dist\public\js\template.js.map

这里的映射信息可能看得不太懂，其实这个是给浏览器看的。

源文件路径及对应编译后的文件路径

“mappings”：记录源文件对应的信息（记录对应位置关系），就能知道源文件中的代码与编译后的文件代码的对应关系了。（它规定一种编码格式）

{
  "version": 3,
  "sources": [
    "webpack:///public/js/template.js"
  ],
  "names": [
    "modules",
    "installedModules",
    "__webpack_require__",
    "moduleId",
    "exports",
    "module",
    "i",
    "l",
    "call",
    "m",
    "c",
    "d",
    "name",
    "getter",
    "o",
    "Object",
    "defineProperty",
    "enumerable",
    "get",
    "r",
    "Symbol",
    "toStringTag",
    "value",
    "t",
    "mode",
    "__esModule",
    "ns",
    "create",
    "key",
    "bind",
    "n",
    "object",
    "property",
    "prototype",
    "hasOwnProperty",
    "p",
    "s",
    "__webpack_exports__",
    "console",
    "log",
    "document",
    "onclick",
    "async",
    "lo"
  ],
  "mappings": "CAAS,SAAUA,GAET,IAAIC,EAAmB,GAGvB,SAASC,EAAoBC,GAG5B,GAAGF,EAAiBE,GACnB,OAAOF,EAAiBE,GAAUC,QAGnC,IAAIC,EAASJ,EAAiBE,GAAY,CACzCG,EAAGH,EACHI,GAAG,EACHH,QAAS,IAUV,OANAJ,EAAQG,GAAUK,KAAKH,EAAOD,QAASC,EAAQA,EAAOD,QAASF,GAG/DG,EAAOE,GAAI,EAGJF,EAAOD,QAKfF,EAAoBO,EAAIT,EAGxBE,EAAoBQ,EAAIT,EAGxBC,EAAoBS,EAAI,SAASP,EAASQ,EAAMC,GAC3CX,EAAoBY,EAAEV,EAASQ,IAClCG,OAAOC,eAAeZ,EAASQ,EAAM,CAAEK,YAAY,EAAMC,IAAKL,KAKhEX,EAAoBiB,EAAI,SAASf,GACX,oBAAXgB,QAA0BA,OAAOC,aAC1CN,OAAOC,eAAeZ,EAASgB,OAAOC,YAAa,CAAEC,MAAO,WAE7DP,OAAOC,eAAeZ,EAAS,aAAc,CAAEkB,OAAO,KAQvDpB,EAAoBqB,EAAI,SAASD,EAAOE,GAEvC,GADU,EAAPA,IAAUF,EAAQpB,EAAoBoB,IAC/B,EAAPE,EAAU,OAAOF,EACpB,GAAW,EAAPE,GAA8B,iBAAVF,GAAsBA,GAASA,EAAMG,WAAY,OAAOH,EAChF,IAAII,EAAKX,OAAOY,OAAO,MAGvB,GAFAzB,EAAoBiB,EAAEO,GACtBX,OAAOC,eAAeU,EAAI,UAAW,CAAET,YAAY,EAAMK,MAAOA,IACtD,EAAPE,GAA4B,iBAATF,EAAmB,IAAI,IAAIM,KAAON,EAAOpB,EAAoBS,EAAEe,EAAIE,EAAK,SAASA,GAAO,OAAON,EAAMM,IAAQC,KAAK,KAAMD,IAC9I,OAAOF,GAIRxB,EAAoB4B,EAAI,SAASzB,GAChC,IAAIQ,EAASR,GAAUA,EAAOoB,WAC7B,WAAwB,OAAOpB,EAAgB,SAC/C,WAA8B,OAAOA,GAEtC,OADAH,EAAoBS,EAAEE,EAAQ,IAAKA,GAC5BA,GAIRX,EAAoBY,EAAI,SAASiB,EAAQC,GAAY,OAAOjB,OAAOkB,UAAUC,eAAe1B,KAAKuB,EAAQC,IAGzG9B,EAAoBiC,EAAI,GAIjBjC,EAAoBA,EAAoBkC,EAAI,GAnFpD,CAsFC,CAEJ,SAAU/B,EAAQD,EAASF,KAM3B,SAAUG,EAAQgC,EAAqBnC,GAE7C,aAEAA,EAAoBiB,EAAEkB,GAQZnC,EAAoB,GAQ9BoC,QAAQC,IAAI,YAEZC,SAASC,QAAUC,iBAdfJ,QAAQK,GAAG",
  "file": "./public/js/template.js",
  "sourceRoot": ""
}

\webpackTest01\dist\index.js

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第27张图片

最后一句代码：//# sourceMappingURL=index.js.map

index.js.map 这个就是当前文件对应的映射文件

浏览器解析完sourcemap后，生成如下信息：

但是我们打开浏览器，去定位报404，没定位成功。

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第28张图片

发现index.css指向没问题，但是template.js指向是有问题的，可能是配置问题，我们改一下output。

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第29张图片

    output: {
        // 这个路径是默认会被加入 devServer 的 contentBase 中
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].js"
        // filename: "./public/js/[name].js"
    },

还是不行，试着改成开发模式。

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

    mode: 'development',
    //mode: 'production',
    devtool: 'source-map',

    entry: {
        // 'test': './src/test.js',

        'template': './src/template.js'
    },
    output: {
        // 这个路径是默认会被加入 devServer 的 contentBase 中
        path: path.resolve(__dirname, 'dist'),
        // filename: "[name].js"
        filename: "./public/js/[name].js"
    },


    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            },

            {
                test: /\.css$/,
                // use: ["style-loader","css-loader"]
                // 不希望通过js的方式生成style标签，因此不需要"style-loader",
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    "css-loader"
                ]
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            title: "My App",
            // 模板文件存放的目录
            template: "./html/template.html",
            // 生成（打包）后的html存放目录
            filename: "app.html",
            minify: {
                collapseWhitespace: true, // 折叠有助于文档树中文本节点的空白
                removeComments: true, // 删除HTML注释
                removeRedundantAttributes: true, // 当值匹配默认值时删除属性。
                removeScriptTypeAttributes: true, // type="text/javascript"从script标签中删除。其他type属性值保持不变
                removeStyleLinkTypeAttributes: true, // type="text/css"从style和link标签中删除。其他type属性值保持不变
                useShortDoctype: true // doctype用短（HTML5）文档类型替换
            },
        }),
        // new HtmlWebpackPlugin({
        //     // 模板文件存放的目录
        //     template: "./html/template1.html",
        //     // 生成（打包）后的html存放目录
        //     filename: "app1.html"
        // }),
        new CleanWebpackPlugin(),
        // 设置css提取路径
        new MiniCssExtractPlugin({
            filename: './public/css/[name].css'
        })
    ],
};

调成开发模式，是压缩后的代码，一压缩就失效，改成开发模式就好了。

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第30张图片

参考：https://github.com/6xiaoDi/blog-Webpack/tree/a0.29
Branch： branch01

commit description：a0.29（Webpack03——example04-2-开发模式下打包后代码映射没有问题）
tag：a0.29

4.1.3 example04-3

官网看手册！！！！

webpack4.0+；webpack配置devtool: "source-map" 生成的map代码没有sourcesContent，没有sourcesContent的结果是你只能定位要压缩代码的位置，无法定位到源码的位置

minimize

如果mode是production类型，minimize的默认值是true，执行默认压缩，

sourceMap 正确配置如下：

const buildConfig = {
    mode: "production",
    output: {
        path: distPath,
        filename: "./js/[name].[hash].min.js",
        publicPath: "./"
    },
    optimization: {    // 1. 这个配置必须
        minimize: false
    },
    plugins: [
    ].concat(baseConfig.htmlArray),
    devtool: "source-map" // 2. 这个配置必须
}

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

    // mode: 'development',
    mode: 'production',
    devtool: 'source-map',

    entry: {
        // 'test': './src/test.js',

        'template': './src/template.js'
    },
    output: {
        // 这个路径是默认会被加入 devServer 的 contentBase 中
        path: path.resolve(__dirname, 'dist'),
        // filename: "[name].js"
        filename: "./public/js/[name].js"
    },

    optimization: {    // 1. 这个配置必须
        minimize: false
    },

    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            },

            {
                test: /\.css$/,
                // use: ["style-loader","css-loader"]
                // 不希望通过js的方式生成style标签，因此不需要"style-loader",
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    "css-loader"
                ]
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            title: "My App",
            // 模板文件存放的目录
            template: "./html/template.html",
            // 生成（打包）后的html存放目录
            filename: "app.html",
            minify: {
                collapseWhitespace: true, // 折叠有助于文档树中文本节点的空白
                removeComments: true, // 删除HTML注释
                removeRedundantAttributes: true, // 当值匹配默认值时删除属性。
                removeScriptTypeAttributes: true, // type="text/javascript"从script标签中删除。其他type属性值保持不变
                removeStyleLinkTypeAttributes: true, // type="text/css"从style和link标签中删除。其他type属性值保持不变
                useShortDoctype: true // doctype用短（HTML5）文档类型替换
            },
        }),
        // new HtmlWebpackPlugin({
        //     // 模板文件存放的目录
        //     template: "./html/template1.html",
        //     // 生成（打包）后的html存放目录
        //     filename: "app1.html"
        // }),
        new CleanWebpackPlugin(),
        // 设置css提取路径
        new MiniCssExtractPlugin({
            filename: './public/css/[name].css'
        })
    ],
};

npm start

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第31张图片

参考：https://github.com/6xiaoDi/blog-Webpack/tree/a0.30
Branch： branch01

commit description：a0.30（Webpack03——example04-3-生产模式下打包后代码解决映射出错的问题）
tag：a0.30

4.2 扩展

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第32张图片

我们在官网能看到它有很多选项：

+++ 非常快速, ++ 快速, + 比较快, o 中等, - 比较慢, -- 慢

devtool 构建速 度 重新构建速 度 是否适用于生产环境 品质(quality)
(none) + + + + + + yes 打包后的代码
eval + + + + + + no 生成后的代码
cheap-eval-source-map + + + no 转换过的代码（仅限 行）
cheap-module-eval-source-map 0 + + no 原始源代码（仅限 行）
eval-source-map – + no 原始源代码
cheap-source-map + 0 no 转换过的代码（仅限 行）
cheap-module-source-map 0 - no 原始源代码（仅限 行）
inline-cheap-source-map + 0 no 转换过的代码（仅限 行）
inline-cheap-module-source-map 0 - no 原始源代码（仅限 行）
source-map – – yes 原始源代码
inline-source-map – – no 原始源代码
hidden-source-map – – yes 原始源代码
nosources-source-map – – yes 无源代码内容

4.2.1 对于生产环境

这些选项通常用于生产环境中：

(none)（省略 devtool 选项） - 不生成 source map。这是一个不错的选择。

source-map - 整个 source map 作为一个单独的文件生成。它为 bundle 添加了一个引用注释，以便开发工具知道在哪里可以找到它。

你应该将你的服务器配置为，不允许普通用户访问 source map 文件！（上线推荐hidden-source-map ）

hidden-source-map - 与 source-map 相同，但不会为 bundle 添加引用注释。如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息，但不想为浏览器开发工具暴露你的 source map，这个选项会很有用。

你不应将 source map 文件部署到 web 服务器。而是只将其用于错误报告工具。

nosources-source-map - 创建的 source map 不包含 sourcesContent(源代码内容)。它可以用来映射客户端上的堆栈跟踪，而无须暴露所有的源代码。你可以将 source map 文件部署到 web 服务器。

这仍然会暴露反编译后的文件名和结构，但它不会暴露原始代码。

在使用 uglifyjs-webpack-plugin 时，你必须提供 sourceMap：true 选项来启用 source map 支持。

4.2.2 特定场景

以下选项对于开发环境和生产环境并不理想。他们是一些特定场景下需要的，例如，针对一些第三方工具。

inline-source-map - source map 转换为 DataUrl 后添加到 bundle 中。

cheap-source-map - 没有列映射(column mapping)的 source map，忽略 loader source map。

inline-cheap-source-map - 类似 cheap-source-map，但是 source map 转换为 DataUrl 后添加到 bundle 中。

cheap-module-source-map - 没有列映射(column mapping)的 source map，将 loader source map 简化为每行一个映射(mapping)。

inline-cheap-module-source-map - 类似 cheap-module-source-map，但是 source mapp 转换为 DataUrl 添加到 bundle 中。

4.2.2.1 example05

    // devtool: 'source-map',
    devtool: 'inline-source-map',

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第33张图片

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第34张图片

生成的文件中就没有index.js.map文件了！

image-20200619160208823

index.js.map文件的对应信息在其注释里，并转成了dataurl格式。

\webpackTest01\dist\index.js

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t);console.lo("fn")}]);
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vd2VicGFjay9ib290c3RyYXAiLCJ3ZWJwYWNrOi8vLy4vc3JjL2ZuLmpzIl0sIm5hbWVzIjpbImluc3RhbGxlZE1vZHVsZXMiLCJfX3dlYnBhY2tfcmVxdWlyZV9fIiwibW9kdWxlSWQiLCJleHBvcnRzIiwibW9kdWxlIiwiaSIsImwiLCJtb2R1bGVzIiwiY2FsbCIsIm0iLCJjIiwiZCIsIm5hbWUiLCJnZXR0ZXIiLCJvIiwiT2JqZWN0IiwiZGVmaW5lUHJvcGVydHkiLCJlbnVtZXJhYmxlIiwiZ2V0IiwiciIsIlN5bWJvbCIsInRvU3RyaW5nVGFnIiwidmFsdWUiLCJ0IiwibW9kZSIsIl9fZXNNb2R1bGUiLCJucyIsImNyZWF0ZSIsImtleSIsImJpbmQiLCJuIiwib2JqZWN0IiwicHJvcGVydHkiLCJwcm90b3R5cGUiLCJoYXNPd25Qcm9wZXJ0eSIsInAiLCJzIiwiY29uc29sZSIsImxvIl0sIm1hcHBpbmdzIjoiYUFDRSxJQUFJQSxFQUFtQixHQUd2QixTQUFTQyxFQUFvQkMsR0FHNUIsR0FBR0YsRUFBaUJFLEdBQ25CLE9BQU9GLEVBQWlCRSxHQUFVQyxRQUduQyxJQUFJQyxFQUFTSixFQUFpQkUsR0FBWSxDQUN6Q0csRUFBR0gsRUFDSEksR0FBRyxFQUNISCxRQUFTLElBVVYsT0FOQUksRUFBUUwsR0FBVU0sS0FBS0osRUFBT0QsUUFBU0MsRUFBUUEsRUFBT0QsUUFBU0YsR0FHL0RHLEVBQU9FLEdBQUksRUFHSkYsRUFBT0QsUUFLZkYsRUFBb0JRLEVBQUlGLEVBR3hCTixFQUFvQlMsRUFBSVYsRUFHeEJDLEVBQW9CVSxFQUFJLFNBQVNSLEVBQVNTLEVBQU1DLEdBQzNDWixFQUFvQmEsRUFBRVgsRUFBU1MsSUFDbENHLE9BQU9DLGVBQWViLEVBQVNTLEVBQU0sQ0FBRUssWUFBWSxFQUFNQyxJQUFLTCxLQUtoRVosRUFBb0JrQixFQUFJLFNBQVNoQixHQUNYLG9CQUFYaUIsUUFBMEJBLE9BQU9DLGFBQzFDTixPQUFPQyxlQUFlYixFQUFTaUIsT0FBT0MsWUFBYSxDQUFFQyxNQUFPLFdBRTdEUCxPQUFPQyxlQUFlYixFQUFTLGFBQWMsQ0FBRW1CLE9BQU8sS0FRdkRyQixFQUFvQnNCLEVBQUksU0FBU0QsRUFBT0UsR0FFdkMsR0FEVSxFQUFQQSxJQUFVRixFQUFRckIsRUFBb0JxQixJQUMvQixFQUFQRSxFQUFVLE9BQU9GLEVBQ3BCLEdBQVcsRUFBUEUsR0FBOEIsaUJBQVZGLEdBQXNCQSxHQUFTQSxFQUFNRyxXQUFZLE9BQU9ILEVBQ2hGLElBQUlJLEVBQUtYLE9BQU9ZLE9BQU8sTUFHdkIsR0FGQTFCLEVBQW9Ca0IsRUFBRU8sR0FDdEJYLE9BQU9DLGVBQWVVLEVBQUksVUFBVyxDQUFFVCxZQUFZLEVBQU1LLE1BQU9BLElBQ3RELEVBQVBFLEdBQTRCLGlCQUFURixFQUFtQixJQUFJLElBQUlNLEtBQU9OLEVBQU9yQixFQUFvQlUsRUFBRWUsRUFBSUUsRUFBSyxTQUFTQSxHQUFPLE9BQU9OLEVBQU1NLElBQVFDLEtBQUssS0FBTUQsSUFDOUksT0FBT0YsR0FJUnpCLEVBQW9CNkIsRUFBSSxTQUFTMUIsR0FDaEMsSUFBSVMsRUFBU1QsR0FBVUEsRUFBT3FCLFdBQzdCLFdBQXdCLE9BQU9yQixFQUFnQixTQUMvQyxXQUE4QixPQUFPQSxHQUV0QyxPQURBSCxFQUFvQlUsRUFBRUUsRUFBUSxJQUFLQSxHQUM1QkEsR0FJUlosRUFBb0JhLEVBQUksU0FBU2lCLEVBQVFDLEdBQVksT0FBT2pCLE9BQU9rQixVQUFVQyxlQUFlMUIsS0FBS3VCLEVBQVFDLElBR3pHL0IsRUFBb0JrQyxFQUFJLEdBSWpCbEMsRUFBb0JBLEVBQW9CbUMsRUFBSSxHLHNDQ2pGakRDLFFBQVFDLEdBQUciLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzQ29udGVudCI6WyIgXHQvLyBUaGUgbW9kdWxlIGNhY2hlXG4gXHR2YXIgaW5zdGFsbGVkTW9kdWxlcyA9IHt9O1xuXG4gXHQvLyBUaGUgcmVxdWlyZSBmdW5jdGlvblxuIFx0ZnVuY3Rpb24gX193ZWJwYWNrX3JlcXVpcmVfXyhtb2R1bGVJZCkge1xuXG4gXHRcdC8vIENoZWNrIGlmIG1vZHVsZSBpcyBpbiBjYWNoZVxuIFx0XHRpZihpbnN0YWxsZWRNb2R1bGVzW21vZHVsZUlkXSkge1xuIFx0XHRcdHJldHVybiBpbnN0YWxsZWRNb2R1bGVzW21vZHVsZUlkXS5leHBvcnRzO1xuIFx0XHR9XG4gXHRcdC8vIENyZWF0ZSBhIG5ldyBtb2R1bGUgKGFuZCBwdXQgaXQgaW50byB0aGUgY2FjaGUpXG4gXHRcdHZhciBtb2R1bGUgPSBpbnN0YWxsZWRNb2R1bGVzW21vZHVsZUlkXSA9IHtcbiBcdFx0XHRpOiBtb2R1bGVJZCxcbiBcdFx0XHRsOiBmYWxzZSxcbiBcdFx0XHRleHBvcnRzOiB7fVxuIFx0XHR9O1xuXG4gXHRcdC8vIEV4ZWN1dGUgdGhlIG1vZHVsZSBmdW5jdGlvblxuIFx0XHRtb2R1bGVzW21vZHVsZUlkXS5jYWxsKG1vZHVsZS5leHBvcnRzLCBtb2R1bGUsIG1vZHVsZS5leHBvcnRzLCBfX3dlYnBhY2tfcmVxdWlyZV9fKTtcblxuIFx0XHQvLyBGbGFnIHRoZSBtb2R1bGUgYXMgbG9hZGVkXG4gXHRcdG1vZHVsZS5sID0gdHJ1ZTtcblxuIFx0XHQvLyBSZXR1cm4gdGhlIGV4cG9ydHMgb2YgdGhlIG1vZHVsZVxuIFx0XHRyZXR1cm4gbW9kdWxlLmV4cG9ydHM7XG4gXHR9XG5cblxuIFx0Ly8gZXhwb3NlIHRoZSBtb2R1bGVzIG9iamVjdCAoX193ZWJwYWNrX21vZHVsZXNfXylcbiBcdF9fd2VicGFja19yZXF1aXJlX18ubSA9IG1vZHVsZXM7XG5cbiBcdC8vIGV4cG9zZSB0aGUgbW9kdWxlIGNhY2hlXG4gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLmMgPSBpbnN0YWxsZWRNb2R1bGVzO1xuXG4gXHQvLyBkZWZpbmUgZ2V0dGVyIGZ1bmN0aW9uIGZvciBoYXJtb255IGV4cG9ydHNcbiBcdF9fd2VicGFja19yZXF1aXJlX18uZCA9IGZ1bmN0aW9uKGV4cG9ydHMsIG5hbWUsIGdldHRlcikge1xuIFx0XHRpZighX193ZWJwYWNrX3JlcXVpcmVfXy5vKGV4cG9ydHMsIG5hbWUpKSB7XG4gXHRcdFx0T2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsIG5hbWUsIHsgZW51bWVyYWJsZTogdHJ1ZSwgZ2V0OiBnZXR0ZXIgfSk7XG4gXHRcdH1cbiBcdH07XG5cbiBcdC8vIGRlZmluZSBfX2VzTW9kdWxlIG9uIGV4cG9ydHNcbiBcdF9fd2VicGFja19yZXF1aXJlX18uciA9IGZ1bmN0aW9uKGV4cG9ydHMpIHtcbiBcdFx0aWYodHlwZW9mIFN5bWJvbCAhPT0gJ3VuZGVmaW5lZCcgJiYgU3ltYm9sLnRvU3RyaW5nVGFnKSB7XG4gXHRcdFx0T2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsIFN5bWJvbC50b1N0cmluZ1RhZywgeyB2YWx1ZTogJ01vZHVsZScgfSk7XG4gXHRcdH1cbiBcdFx0T2JqZWN0LmRlZmluZVByb3BlcnR5KGV4cG9ydHMsICdfX2VzTW9kdWxlJywgeyB2YWx1ZTogdHJ1ZSB9KTtcbiBcdH07XG5cbiBcdC8vIGNyZWF0ZSBhIGZha2UgbmFtZXNwYWNlIG9iamVjdFxuIFx0Ly8gbW9kZSAmIDE6IHZhbHVlIGlzIGEgbW9kdWxlIGlkLCByZXF1aXJlIGl0XG4gXHQvLyBtb2RlICYgMjogbWVyZ2UgYWxsIHByb3BlcnRpZXMgb2YgdmFsdWUgaW50byB0aGUgbnNcbiBcdC8vIG1vZGUgJiA0OiByZXR1cm4gdmFsdWUgd2hlbiBhbHJlYWR5IG5zIG9iamVjdFxuIFx0Ly8gbW9kZSAmIDh8MTogYmVoYXZlIGxpa2UgcmVxdWlyZVxuIFx0X193ZWJwYWNrX3JlcXVpcmVfXy50ID0gZnVuY3Rpb24odmFsdWUsIG1vZGUpIHtcbiBcdFx0aWYobW9kZSAmIDEpIHZhbHVlID0gX193ZWJwYWNrX3JlcXVpcmVfXyh2YWx1ZSk7XG4gXHRcdGlmKG1vZGUgJiA4KSByZXR1cm4gdmFsdWU7XG4gXHRcdGlmKChtb2RlICYgNCkgJiYgdHlwZW9mIHZhbHVlID09PSAnb2JqZWN0JyAmJiB2YWx1ZSAmJiB2YWx1ZS5fX2VzTW9kdWxlKSByZXR1cm4gdmFsdWU7XG4gXHRcdHZhciBucyA9IE9iamVjdC5jcmVhdGUobnVsbCk7XG4gXHRcdF9fd2VicGFja19yZXF1aXJlX18ucihucyk7XG4gXHRcdE9iamVjdC5kZWZpbmVQcm9wZXJ0eShucywgJ2RlZmF1bHQnLCB7IGVudW1lcmFibGU6IHRydWUsIHZhbHVlOiB2YWx1ZSB9KTtcbiBcdFx0aWYobW9kZSAmIDIgJiYgdHlwZW9mIHZhbHVlICE9ICdzdHJpbmcnKSBmb3IodmFyIGtleSBpbiB2YWx1ZSkgX193ZWJwYWNrX3JlcXVpcmVfXy5kKG5zLCBrZXksIGZ1bmN0aW9uKGtleSkgeyByZXR1cm4gdmFsdWVba2V5XTsgfS5iaW5kKG51bGwsIGtleSkpO1xuIFx0XHRyZXR1cm4gbnM7XG4gXHR9O1xuXG4gXHQvLyBnZXREZWZhdWx0RXhwb3J0IGZ1bmN0aW9uIGZvciBjb21wYXRpYmlsaXR5IHdpdGggbm9uLWhhcm1vbnkgbW9kdWxlc1xuIFx0X193ZWJwYWNrX3JlcXVpcmVfXy5uID0gZnVuY3Rpb24obW9kdWxlKSB7XG4gXHRcdHZhciBnZXR0ZXIgPSBtb2R1bGUgJiYgbW9kdWxlLl9fZXNNb2R1bGUgP1xuIFx0XHRcdGZ1bmN0aW9uIGdldERlZmF1bHQoKSB7IHJldHVybiBtb2R1bGVbJ2RlZmF1bHQnXTsgfSA6XG4gXHRcdFx0ZnVuY3Rpb24gZ2V0TW9kdWxlRXhwb3J0cygpIHsgcmV0dXJuIG1vZHVsZTsgfTtcbiBcdFx0X193ZWJwYWNrX3JlcXVpcmVfXy5kKGdldHRlciwgJ2EnLCBnZXR0ZXIpO1xuIFx0XHRyZXR1cm4gZ2V0dGVyO1xuIFx0fTtcblxuIFx0Ly8gT2JqZWN0LnByb3RvdHlwZS5oYXNPd25Qcm9wZXJ0eS5jYWxsXG4gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLm8gPSBmdW5jdGlvbihvYmplY3QsIHByb3BlcnR5KSB7IHJldHVybiBPYmplY3QucHJvdG90eXBlLmhhc093blByb3BlcnR5LmNhbGwob2JqZWN0LCBwcm9wZXJ0eSk7IH07XG5cbiBcdC8vIF9fd2VicGFja19wdWJsaWNfcGF0aF9fXG4gXHRfX3dlYnBhY2tfcmVxdWlyZV9fLnAgPSBcIlwiO1xuXG5cbiBcdC8vIExvYWQgZW50cnkgbW9kdWxlIGFuZCByZXR1cm4gZXhwb3J0c1xuIFx0cmV0dXJuIF9fd2VicGFja19yZXF1aXJlX18oX193ZWJwYWNrX3JlcXVpcmVfXy5zID0gMCk7XG4iLCJleHBvcnQgZGVmYXVsdCBmdW5jdGlvbigpIHtcbiAgICBjb25zb2xlLmxvKCdmbicpO1xufSJdLCJzb3VyY2VSb290IjoiIn0=

注意webpack针对不同应用可能会产生各种各样的问题，去官网看文档。

参考：https://github.com/6xiaoDi/blog-Webpack/tree/a0.31
Branch： branch01

commit description：a0.31（Webpack03——example05-devtool: 'inline-source-map’的使用）
tag：a0.31

5. WebpackDevServer

实际脚手架工具都有它，如React、Vue启动的时候，都会在本地给我们启动一个服务器。Webpack就给我们提供了这种本地开发的服务器。

每次的代码修改都需要重新编译打包，刷新浏览器，特别麻烦，我们可以通过安装 webpackDevServer 来改善这方面的体验

npm install --save-dev webpack-dev-server

启动命令：

npx webpack-dev-server

或者，package.json 中添加 scripts

...,
"scripts": {
  "server": "webpack-dev-server"
}

5.1 example06

5.1.1 example06-1

npm install --save-dev webpack-dev-server

实际上装了WebpackDevServer后，内部就自动会装一个开发服务器，它是node写的，内部用到是一个express框架，直接调用一个命令就可以把服务启动起来。

\test01\package.json

{
  "name": "test01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "server": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "uglifyjs-webpack-plugin": "^2.2.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.6.0",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "raw-loader": "^4.0.1",
    "style-loader": "^1.2.1",
    "webpack-dev-server": "^3.11.0"
  }
}

npm run server

image-20200619105254691

它帮助我们自动在本地启一个服务器，自动调用webpack.config中的配置，进行webpack打包，打包后的根目录就是output中的path。

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第35张图片

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第36张图片

同时我们发现一个问题，dist目录下什么东西都没有，那么我们是怎么看到网页内容的呢？其实在这里需要注意的一件事情是开发服务器并不会帮助我们打包以后进行output输出，即将打包后的内容输出到dist目录下。而是在内存中开辟一个虚拟路径，即打包后的文件和数据都是存放在内存中的，我们是看不到的。

为什么这么去做呢？主要原因是这样做，程序编译、运行会更快，因为它会把打包编译生成的代码放在内存中（硬盘的操作必然比内存的操作慢很多），通过express对对应的路径进行访问，实际我们访问url时候，此时url指向的是内存中的某一块，从而访问速度也非常地快。实际上在开发环境下，在启动vue和react时候，一样也看不到输出（原理同），但可以显示在网页上，只有用build命令打包生产，才可以看到目录中运行的文件。

综上它其实就是一个开发服务器，很多脚手架工具都是用它实现运行应用的。

image-20200619105858045

参考：https://github.com/6xiaoDi/blog-Webpack/tree/a0.32
Branch： branch01

commit description：a0.32（Webpack03——example6-1-webpack-dev-server的使用）
tag：a0.32

5.1.2 example06-2

修改 webpack.config.js

module.exports = {
  ...,
  devServer: {
      // 生成的虚拟目录路径（在内存中模拟生成的虚拟路径）
      contentBase: "./dist",
      // 自动开启浏览器
      open: true,
      // 端口
      port: 8081
    }
}

启动服务以后，webpack 不在会把打包后的文件生成到硬盘真实目录中了，而是直接存在了内存中(同时虚拟了一个存放目录路径)，后期更新编译打包和访问速度大大提升！

（ contentBase: "./dist" ）=> output path 是默认会被加入 devServer 的 contentBase 中，contentBase配与不配，它都会加进去的。

具体配置参见官方文档：

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第37张图片

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

    // mode: 'development',
    mode: 'production',
    // devtool: 'source-map',
    devtool: 'inline-source-map',

    entry: {
        // 'test': './src/test.js',

        'template': './src/template.js'
    },
    output: {
        // 这个路径是默认会被加入 devServer 的 contentBase 中
        path: path.resolve(__dirname, 'dist'),
        // filename: "[name].js"
        filename: "./public/js/[name].js"
    },

    optimization: {    // 1. 这个配置必须
        minimize: false
    },

    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            },

            {
                test: /\.css$/,
                // use: ["style-loader","css-loader"]
                // 不希望通过js的方式生成style标签，因此不需要"style-loader",
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    "css-loader"
                ]
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            title: "My App",
            // 模板文件存放的目录
            template: "./html/template.html",
            // 生成（打包）后的html存放目录
            filename: "app.html",
            minify: {
                collapseWhitespace: true, // 折叠有助于文档树中文本节点的空白
                removeComments: true, // 删除HTML注释
                removeRedundantAttributes: true, // 当值匹配默认值时删除属性。
                removeScriptTypeAttributes: true, // type="text/javascript"从script标签中删除。其他type属性值保持不变
                removeStyleLinkTypeAttributes: true, // type="text/css"从style和link标签中删除。其他type属性值保持不变
                useShortDoctype: true // doctype用短（HTML5）文档类型替换
            },
        }),
        // new HtmlWebpackPlugin({
        //     // 模板文件存放的目录
        //     template: "./html/template1.html",
        //     // 生成（打包）后的html存放目录
        //     filename: "app1.html"
        // }),
        new CleanWebpackPlugin(),
        // 设置css提取路径
        new MiniCssExtractPlugin({
            filename: './public/css/[name].css'
        })
    ],

    devServer: {
        // 多目录，默认会（如果还想将其他目录映射到静态目录中可进行配置此参数）
        contentBase: [path.join(__dirname, 'html')], // 项目目录下的html目录映射进去
        open: true, // 自动打开浏览器
        port: 8081,
        index: 'app.html' // 默认首页
    }
};

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第38张图片

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第39张图片

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第40张图片

参考：https://github.com/6xiaoDi/blog-Webpack/tree/a0.33
Branch： branch01

commit description：a0.33（Webpack03——example6-1-webpack-dev-server的自定义contentBase）
tag：a0.33

5.2 Proxy

当下前端的开发都是前后端分离开发的，前端开发过程中代码会运行在一个服务器环境下(如当前的 WebpackDevServer)，那么在处理一些后端请求的时候通常会出现跨域的问题。WebpackDevServer 内置了一个代理服务，通过内置代理就可以把我们的跨域请求转发目标服务器上(WebpackDevServer 内置的代理发送的请求属于后端 - node，不受同源策略限制)，具体如下：

const Koa = require('koa');
const KoaRouter = require('koa-router');
 
const app = new Koa();
const router = new KoaRouter();
 
router.get('/api/info', async ctx => {
    ctx.body = {
        username: 'zMouse',
        gender: 'male'
    }
})
 
app.use( router.routes() );
app.listen(8787);

axios({
  url: 'http://localhost:8787/api/info'
}).then(res => {
  console.log('res',res.data);
})

默认情况下，该代码运行以后会出现跨域请求错误，修改 webpack 配置

module.exports = {
  ...,
  devServer: {
      // 生成的虚拟目录路径
      contentBase: "./dist",
      // 自动开启浏览器
      open: true,
      // 端口
      port: 8081,
      proxy: {
      '/api': {
          target: 'http://localhost:8787'
        }
    }
    }
}

通过 proxy 设置，当我们在当前 WebpackDevServer 环境下发送以 /api 开头的请求都会被转发到 http://localhost:8787 目标服务器下

axios({
  //url: 'http://locahost:8081/api/info',
  url: '/api/info'
}).then(res => {
  console.log('res',res.data);
})

注意 url 地址要填写 WebpackDevServer 域，比如当前 WebpackDevServer 开启的是 http://localhost:8081，也就是我们当前前端代码运行的环境，那么请求的 url 也必须发送到这里，当我们的请求满足了 proxy 中设置的 /api 开头，那么就会把请求转发到 target ，所以最后的实际请求是：http://lcoahost:8787/api/info

注意：它仅做正向代理，就如同我们开发时用redux发请求时用的http-proxy-middleware，反向代理时建议用Nginx。

5.3 example07

5.3.1 example07-1

新建一个server01目录

npm init -y

npm i koa koa-router

\server01\app.js

const Koa = require('koa')
const KoaRouter = require('koa-router')
 
const app = new Koa();
const router = new KoaRouter();
 
router.get('/', async ctx => {
    ctx.body = '大前端开发';
})
 
app.use(router.routes())
 
app.listen(7777);

启动：

node app

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第41张图片

参考：https://github.com/6xiaoDi/blog-Webpack/tree/a0.34
Branch： branch01

commit description：a0.34（Webpack03——example07-1-配置nodejs的koa）
tag：a0.34

5.3.2 example07-2

\server01\app.js

const Koa = require('koa')
const KoaRouter = require('koa-router')
 
const app = new Koa();
const router = new KoaRouter();
 
// router.get('/', async ctx => {
//     ctx.body = '大前端开发';
// })
 
router.get('/api/data', async ctx => {
    ctx.body = '大前端开发';
})
 
app.use(router.routes())
 
app.listen(7777);

\test01\src\template.js

import fn from './fn';
import './css/index.css';
 
console.log('template');
 
document.onclick = async function() {
 
    let rs = await fetch("http://localhost:7777/api/data")
 
    console.log('rs', rs);
 
    // fn();
};

涉及跨域问题。

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第42张图片

参考：https://github.com/6xiaoDi/blog-Webpack/tree/a0.35
Branch： branch01

commit description：a0.35（Webpack03——example07-2-前端请求后台，必然出跨域的问题）
tag：a0.35

5.3.3 example07-3

\test01\webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 
module.exports = {
 
    // mode: 'development',
    mode: 'production',
    devtool: 'source-map',
    entry: {
        // 'test': './src/test.js',
 
        'template': './src/template.js'
    },
    output: {
        // 这个路径是默认会被加入 devServer 的 contentBase 中
        path: path.resolve(__dirname, 'dist'),
        // filename: "[name].js"
        filename: "./public/js/[name].js"
    },
 
 
    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            },
 
            {
                test: /\.css$/,
                // use: ["style-loader","css-loader"]
                // 不希望通过js的方式生成style标签，因此不需要"style-loader",
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    "css-loader"
                ]
            }
        ]
    },
 
    plugins: [
        new HtmlWebpackPlugin({
            title: "My App",
            // 模板文件存放的目录
            template: "./html/template.html",
            // 生成（打包）后的html存放目录
            filename: "app.html",
            minify: true
        }),
        // new HtmlWebpackPlugin({
        //     // 模板文件存放的目录
        //     template: "./html/template1.html",
        //     // 生成（打包）后的html存放目录
        //     filename: "app1.html"
        // }),
 
        new CleanWebpackPlugin(),
        // 设置css提取路径
        new MiniCssExtractPlugin({
            filename: './public/css/[name].css'
        })
    ],
 
    devServer: {
        //output path 是默认会被加入 devServer 的 contentBase 中，contentBase配与不配，它都会加进去的
        // 多目录，默认会（如果还想将其他目录映射到静态目录中可进行配置此参数）
        contentBase: [path.join(__dirname, 'html')], // 项目目录下的html目录映射进去
        open: true, // 自动打开浏览器
        port: 8081,
        index: 'app.html', // 默认首页
        proxy: {
            // 服务器代理，当访问'/api'时，就代理到'http://localhost:7777'
            '/api': {
                target: 'http://localhost:7777'
            }
        }
    }
};

\test01\src\template.js

import fn from './fn';
import './css/index.css';
 
console.log('template');
 
document.onclick = async function() {
 
    // let rs = await fetch("http://localhost:7777/api/data")
    let rs = await fetch('/api/data')
 
    console.log('rs', rs);
 
 
    // fn();
};

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第43张图片

参考：https://github.com/6xiaoDi/blog-Webpack/tree/a0.36
Branch： branch01

commit description：a0.36（Webpack03——example07-3-前端请求后台，解决跨域的问题）
tag：a0.36

6. Hot Module Replacement（模块热替换<局部更新>）

6.1 引例

在开发过程中，我们希望代码变化后，页面可以跟着刷新，这个称为live reload，翻译过来是热重载。

我们在开发应用的时候，经常希望代码发生改变以后，能跟辅助重新刷新页面。webpack能重新编译，又能重新刷新页面。

它是通过WDS做到的。

image-20200619125758521

它是通过websocket进行通讯的！

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第44张图片

其实webpack的内部运用到express框架（提供http服务），它来开服务器，我们通过浏览器访问该服务器，浏览器会跟express服务器建立一个链接，且是长链接websocket。当我们在后台修改代码以后，webpack会发现我们修改代码了，之后它会帮助进行编译，编译完成之后，它会通过express发送一个实时消息给当前的客户端浏览器（令其刷新页面），通过websocket办到的。

在之前当代码有变化，我们使用的 live reload，也就是刷新整个页面，虽然这样为我们省掉了很多手动刷新页面的麻烦（丢失页面当中很多状态），但是这样即使只是修改了很小的内容，也会刷新整个页面，无法保持页面操作状态。HMR 随之就出现了，它的核心的局部（模块）更新，也就是不刷新页面，只更新变化的部分。

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第45张图片

module.exports = {
  ...,
  devServer: {
      // 生成的虚拟目录路径
      contentBase: "./dist",
      // 自动开启浏览器
      open: true,
      // 端口
      port: 8081,
      // 开启热更新
      hot:true,
      // 即使 HMR 不生效，也不去刷新整个页面(选择开启)
    hotOnly:true,
      proxy: {
      '/api': {
          target: 'http://localhost:8787'
        }
    }
    }
}

开启 HMR 以后，当代码发生变化，webpack 即会进行编译，并通过 websocket 通知客户端(浏览器)，我们需要监听处理来自 webpack 的通知，然后通过 HMR 提供的 API 来完成我们的局部更新逻辑

export default function() {
    console.log('start1!');
}

import fn1 from './fn1.js';
box1.onclick = fn1;
 
if (module.hot) {//如果开启 HMR
    module.hot.accept('./fn1.js', function() {
      // 更新逻辑
      box1.onclick = fn1;
    })
}

上面代码就是 当 ./fn1.js 模块代码发生变化的时候，把最新的 fn1 函数绑定到 box1.onclick 上

从上面就可以看到，HMR 其实就是以模块为单位，当模块代码发生修改的时候，通知客户端进行对应的更新，而客户端则根据具体的模块来更新我们的页面逻辑(这些逻辑需要自己去实现)，好在当前一些常用的更新逻辑都有了现成的插件

6.2 css热更新

样式热更新比较简单，style-loader 中就已经集成实现了，我们只需要在 use 中使用就可以了

react和vue脚手架工具已经把热更新集成进去了。

6.3 react 热更新

  • https://github.com/gaearon/react-hot-loader

  • react 脚手架中也有集成

6.4 vue 热更新

  • https://github.com/vuejs/vue-loader
  • vue 脚手架中也有集成

6.5 example08

6.5.1 example08-1

\test01\src\template.js

import fn from './fn';
import './css/index.css';
 
console.log('template');
 
document.onclick = async function() {
 
    // let rs = await fetch("http://localhost:7777/api/data")
    let rs = await fetch('/api/data')
 
    // console.log('rs', rs);
 
    // console.log('我修改了代码!！！！!!!');
 
    fn();
};
 
console.log(module.hot);

image-20200619131735735

\test01\webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {

    // mode: 'development',
    mode: 'production',
    // devtool: 'source-map',
    devtool: 'inline-source-map',

    entry: {
        // 'test': './src/test.js',

        'template': './src/template.js'
    },
    output: {
        // 这个路径是默认会被加入 devServer 的 contentBase 中
        path: path.resolve(__dirname, 'dist'),
        // filename: "[name].js"
        filename: "./public/js/[name].js"
    },

    optimization: {    // 1. 这个配置必须
        minimize: false
    },

    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            },

            {
                test: /\.css$/,
                // use: ["style-loader","css-loader"]
                // 不希望通过js的方式生成style标签，因此不需要"style-loader",
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    "css-loader"
                ]
            }
        ]
    },

    plugins: [
        new HtmlWebpackPlugin({
            title: "My App",
            // 模板文件存放的目录
            template: "./html/template.html",
            // 生成（打包）后的html存放目录
            filename: "app.html",
            minify: {
                collapseWhitespace: true, // 折叠有助于文档树中文本节点的空白
                removeComments: true, // 删除HTML注释
                removeRedundantAttributes: true, // 当值匹配默认值时删除属性。
                removeScriptTypeAttributes: true, // type="text/javascript"从script标签中删除。其他type属性值保持不变
                removeStyleLinkTypeAttributes: true, // type="text/css"从style和link标签中删除。其他type属性值保持不变
                useShortDoctype: true // doctype用短（HTML5）文档类型替换
            },
        }),
        // new HtmlWebpackPlugin({
        //     // 模板文件存放的目录
        //     template: "./html/template1.html",
        //     // 生成（打包）后的html存放目录
        //     filename: "app1.html"
        // }),
        new CleanWebpackPlugin(),
        // 设置css提取路径
        new MiniCssExtractPlugin({
            filename: './public/css/[name].css'
        })
    ],

    devServer: {
        // 多目录，默认会（如果还想将其他目录映射到静态目录中可进行配置此参数）
        contentBase: [path.join(__dirname, 'html')], // 项目目录下的html目录映射进去
        open: true, // 自动打开浏览器
        port: 8081,
        index: 'app.html', // 默认首页
        proxy: {
            // 服务器代理，当访问'/api'时，就代理到'http://localhost:7777'
            '/api': {
                target: 'http://localhost:7777'
            }
        },
        // 开启热更新
        hot:true,
        // 即使 HMR 不生效，也不去刷新整个页面(选择开启)
        hotOnly:true,
    }
};

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第46张图片

module.hot.accept: 当我们的模块中有更新的时候，webpack进行编译，同时将编译的模块以事件的形式通知给它。监听哪个模块的更新。

\test01\src\template.js

import fn from './fn';
import fn1 from './fn1';
import './css/index.css';
 
console.log('template');
 
document.onclick = async function() {
 
    // let rs = await fetch("http://localhost:7777/api/data")
    let rs = await fetch('/api/data')
 
    // console.log('rs', rs);
 
    // console.log('我修改了代码!！！！!!!');
 
    fn();
};
 
let input = document.querySelector('input');
input.onfocus = function() {
    fn1();
}
 
// console.log(module.hot);
 
if (module.hot) {
    // module.hot.accept: 监听哪个模块的更新
    module.hot.accept('./fn', () => {
        console.log('fn更新了');
    });
 
    module.hot.accept('./fn1', () => {
        console.log('fn1更新了....');
    });
}

\test01\src\fn1.js

export default function() {
    console.log('我是新的代码');
}

当我们代码更新，webpack会进行监听，重新编译之后，会把更新的模块以事件的一种机制通过websocket通知浏览器，浏览器通过当前的提供的module.hot.accept来监听是哪个模块发生了更新，它不会刷新我们整个页面，以模块进行局部更新。

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第47张图片

webpack的内容非常庞大，建议过过文档即可，之后使用到了再去看，不用死记硬背。

参考：https://github.com/6xiaoDi/blog-Webpack/tree/a0.37
Branch： branch01

commit description：a0.37（Webpack03——example08-1-模块热更新）
tag：a0.37

6.5.2 example08-2

针对动态生成的页面：

\test01\src\meAlert.js

export default function meAlert() {
    let button = document.createElement('button');
    button.innerHTML = '按钮1';
    document.body.appendChild(button);
    return button;
}

\test01\src\template.js

import fn from './fn';
import fn1 from './fn1';
import meAlert from './meAlert';
import './css/index.css';
 
console.log('template');
 
document.onclick = async function() {
 
    // let rs = await fetch("http://localhost:7777/api/data")
    let rs = await fetch('/api/data')
 
    // console.log('rs', rs);
 
    // console.log('我修改了代码!！！！!!!');
 
    fn();
};
 
let input = document.querySelector('input');
input.onfocus = function() {
    fn1();
}
 
let btn = meAlert();
 
 
 
// console.log(module.hot);
 
if (module.hot) {
    // module.hot.accept: 监听哪个模块的更新
    module.hot.accept('./fn', () => {
        console.log('fn更新了');
    });
 
    module.hot.accept('./fn1', () => {
        console.log('fn1更新了....');
    });
 
    module.hot.accept('./kkbAlert', () => {
        console.log('按钮更新了');
        btn.remove();
        btn = meAlert();
    })
}

0基础快速入门WebPack（3）——图解详述plugins（插件）的安装及sourceMap的使用及WebpackDevServer正向代理和模块热更新等（附详细案例源码解析过程及版本迭代过程）_第48张图片

但是这种更新逻辑是按照原生写的，全这样写累死，框架有自己的更新逻辑。当我们的组件发生更新的时候，会调用框架中对应的渲染接口，而不是这样写，具体参考以上提供的vue或者react的热更新链接。

参考：https://github.com/6xiaoDi/blog-Webpack/tree/a0.38
Branch： branch01

commit description：a0.38（Webpack03——example08-2-模块热更新-针对动态生成的页面）
tag：a0.38



（后续待补充）

你可能感兴趣的:(#,Webpack快速入门)

  • Python快速入门 —— 第三节：类与对象 孤华暗香 Python快速入门python开发语言
    第三节：类与对象目标：了解面向对象编程的基础概念，并学会如何定义类和创建对象。内容：类与对象：定义类：class关键字。类的构造函数：__init__()。类的属性和方法。对象的创建与使用。示例：classStudent:def__init__(self,name,age,major):self.name&#
  • webpack图片等资源的处理 dmengmeng
    需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
  • esp32开发快速入门 8 : MQTT 的快速入门，基于esp32实现MQTT通信 z755924843 ESP32开发快速入门服务器网络运维
    MQTT介绍简介MQTT（MessageQueuingTelemetryTransport，消息队列遥测传输协议），是一种基于发布/订阅（publish/subscribe）模式的"轻量级"通讯协议，该协议构建于TCP/IP协议上，由IBM在1999年发布。MQTT最大优点在于，可以以极少的代码和有限的带宽，为连接远程设备提供实时可靠的消息服务。作为一种低开销、低带宽占用的即时通讯协议，使其在物联
  • 详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因 hw_happy 开发语言前端vue.jsjavascript
    前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
  • go语言安装快速入门 吉祥鸟hu
    [TOC]go语言是什么Go是一个开源的编程语言，它能让构造简单、可靠且高效的软件变得容易。Go是从2007年末由RobertGriesemer,RobPike,KenThompson主持开发，后来还加入了IanLanceTaylor,RussCox等人，并最终于2009年11月开源，在2012年早些时候发布了Go1稳定版本。现在Go的开发已经是完全开放的，并且拥有一个活跃的社区如何安装环境笔者这
  • react里的index.js是怎么跟index.html结合起来的? SherrinfordL
    image.pngcreate-react-app把webpack、babel等配置都封装到了依赖项目react-script中，所以你无法直观的看到这些配置。你可以在项目下运行npmruneject，被隐藏的配置文件就会暴露到项目根路径下。把请求转发到index.html原因是，你执行npmrunstart时，启动的webpack-dev-server，会加载react-script项目conf
  • C++快速入门扫盲总结 六竹书生__wa C/C++Qt
    C++快速入门扫盲总结C++语言新特性C++的新特性C++的输入输出方式C++之命名空间namespaceC++面向对象类和对象构造函数与析构函数this指针继承重载函数重载运算符重载多态数据封装数据抽象接口（抽象类）C++语言新特性C++的新特性C++比C语言新增的数据类型是布尔类型（bool）。但是在新的C语言标准里已经有布尔类型了，但是在旧的C语言标准里是没有布尔类型的，编译器也无法解释布尔
  • 深入理解Webpack核心模块Tapable钩子[异步版] weixin_34413802 webpackjavascriptViewUI
    接上一篇文章深入理解Webpack核心模块WTApable钩子(同步版)tapable中三个注册方法1tap(同步)2tapAsync(cb)3tapPromise(注册的是Promise)tapable中对三个触发方法1call2callAsync3promise这一章节我们将分别实现异步的Async版本和Promise版本异步钩子AsyncParallelHookAsyncParallelHo
  • webpack 之 tapable 学习 weixin_34008784 webpackjavascriptViewUI
    前言webpack大家应该都耳熟能详了。个人感觉，webpack的本质就是让一堆的Loader和Plugin在webpack的可支配范围内，有序可控的执行，最终生成一堆可在浏览器中执行的code和一些状态信息。而这些Loader和Plugin，有用户自定义的，也有webpack自己内部定义的。Loader的运行机制，不是这篇文章讲述的内容，有需要的朋友，可以看下我之前的这篇文章：webpack之l
  • webapck由浅入深——（Tapable） weixin_33737134 webpackViewUI
    webpack系列文章webpack由浅入深——（webpack基础配置）webpack由浅入深——（webpack优化配置）webpack由浅入深——（tapable）webpack由浅入深——（webapck简易版）webpack由浅入深——（ast、loader和plugin）Tapable和webpackTapable是基于发布订阅模式实现的一个类库，提供了许多Hook类，可创建许多钩子。
  • webpack插件开发必会Tapable web老猴子 webpack前端javascript
    认识Tapable官方对tapable的定义是钩子，业界很多写tapable的觉得它是发布订阅模式，它确实很像发布订阅模式，但是不完全是，至于官方说的钩子，个人感觉在webpack内部可以称作钩子，因为是官方定义的，所以肯定是按照设计的想法来使用的，如果是你自己使用，操作不当可能就不是钩子了，毕竟只是一个工具，你拿扳手当锤子也没人说你什么，以上是个人见解，下面附上一些验证的思路。不喜欢论证，喜欢看
  • webpack的插件机制(Tapable) 若梦plus 前端工程化webpack前端
    webpack的插件机制(Tapable)在具体介绍webpack内置插件与钩子可视化工具之前，我们先来了解一下webpack中的插件机制。webpack实现插件机制的大体方式是：创建-webpack在其内部对象上创建各种钩子；注册-插件将自己的方法注册到对应钩子上，交给webpack；调用-webpack编译过程中，会适时地触发相应钩子，因此也就触发了插件的方法。Webpack本质上是一种事件流
  • 四、webpack4.0 - tapable Razas WEBPACK4webpack4.0
    一、tapable介绍webpack中插件的时候，需要用到tapable。新建一个项目WEBPACK-Tapable。初始化package.json:npminit-y安装：npminstalltapable--savetapable是一个包。二、tapable三、AsyncParralleHook四、AsyncSeriesHook五、AsyncSeriesWaterfall
  • tapable详解 风火一回 webpacktapablewebpack插件制作
    tapable详解tapable是webpack内部使用的一个流程管理工具，主要用来串联插件，完善事件流执行。1.安装tapableyarnaddtapable2.常用hooksimport{SyncHook,SyncBailHook,SyncWaterfallHook,SyncLoopHook,AsyncParallelHook,AsyncParallelBailHook,AsyncSeries
  • Tapable 信海利世 webpackwebpack前端
    一、Tapable是什么？Tapable是一个类似于Node.js的EventEmitter的库,主要是控制钩子函数的发布与订阅,控制着webpack的插件系统。Tapable库暴露了很多Hook（钩子）类，为插件提供挂载的钩子const{SyncHook,//同步钩子SyncBailHook,//同步熔断钩子即return一个非undefined的值，则不再继续执行后面的监听函数SyncWate
  • Webpack插件核心原理 gogo2027 webpack
    引言围绕Webpack打包流程中最核心的机制就是所谓的Plugin机制。所谓插件即是webpack生态中最关键的部分，它为社区用户提供了一种强有力的方式来直接触及webpack的编译过程(compilationprocess)。今天，我们来聊聊Webpack中必不可少的核心Plugin机制～Plugin本质上在Webpack编译阶段会为各个编译对象初始化不同的Hook，开发者可以在自己编写的Plu
  • webpack怎么配置单页面或者多页面项目？ 镜中的女孩-potato webpack前端node.js
    单页直接在entry中指定单页面的入口文件即可，对于多页面来说，如果页面之间有依赖关系可以考虑将entry的值改成一个数组，数组中的每一项是入口文件的地址，并且通过dependOn配置多个入口的依赖关系，一般的，我们也可以直接在entry中配置多个入口文件的键值对1、单页面举个例子=>你有这样一个项目架构├──config│├──webpack.config.js//webpack配置文件├──s
  • fetch-event-source 如何通过script全局引入 cuiyuchen111 javascript前端
    fetchEventSource源码中导出了两种类型的包cjs和esm。但是有个需求如何在原生是js中通过script标签引呢？需要加上type=module。今天介绍另一种方法下载源码文件：https://github.com/Azure/fetch-event-source.git安装:npminstall--save-devwebpackwebpack-clits-loadertypescr
  • 【Webpack 踩坑】CSS加载缓慢 ①条咸鱼 webpackcssrust
    问题：使用webpack5，单独index.scss在assets/css目录下，但是不管是production还是development环境下，都会出现dom加载完后再渲染样式本意是想要将样式单独打包到一个文件夹，还有压缩css于是用了mini-css-extract-plugin这个loader（前提要先安装）//webpack.config.jsconstMiniCssExtractPlug
  • 年薪80w起！零成本快速入门大模型指南 AI产品经理 语言模型人工智能自然语言处理机器学习
    今年招聘市场确实是好点了，我发现群友都在讨论，得赶快学点AI大模型。他们有的是想正式转到一些新兴的AI行业，需要系统的学习训练。更多的是想跟已有的技能结合，辅助编程提效，或上手实操应用，增加自己的职场竞争力。这也可以理解，ChatGPT推出仅一年半的时间，就将生成式AI推向主流。从谷歌到亚马逊，从百度到阿里，几乎所有科技巨头都在布局AI，也直接影响到了招聘市场，大模型相关的岗位数量多了不少，年薪甚
  • TypeScript 快速入门 echozzi 1024程序员节
    一、TypeScript是什么TypeScript是一种由微软开发的自由和开源的编程语言。于2012年推出。TypeScript是JavaScript的一个超集。为JavaScript添加了类型系统。TypeScript与JavaScript的区别TypeScriptJavaScriptJavaScript的超集用于解决大型项目的代码复杂性一种脚本语言，用于创建动态网页可以在编译期间发现并纠正错误
  • 从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南 Sam9029 Webpack前端webpack
    **‍‍若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！**由于文章有一万字左右的，故而内容中部分不免冗余，或许有写了些废话进去，但整体也无伤大雅**‍‍文章是初次实践总结,若有错误或某个内容有更优的解决方案，还望指正！**附录中有脚手架文件夹目录大纲（Vue3+Webpack5）脚手架项目源码:https://github.com/sam9029/s9_webpack_g
  • webpack原理、优势、基本功能和常见问题 伟大的人民艺术家 javascriptes6
    webpack是一个模块打包工具，用它可以管理项目中的模块依赖，并编译出所需的静态文件。打包原理：webpack打包原理是根据文件间的依赖关系对其进行静态分析，将这些模块按指定规则生成静态资源，当webpack处理程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，将所有这些模块打包成一个或多个bundle。webpack构建流程初始化参数—>开始编译---->确定入口---->
  • 前端技能树，面试复习第 29 天—— 简述 Babel 的原理 | Webpack 构建流程 | Webpack 热更新原理 | Git 常用命令 编程轨迹_ 前端面试复习笔记前端面试面经前端工程化WebpackBabel前端面试大厂面试题
    31b3479814f74acbb70b9f63f2e80012.gif"width=“100%”>⭐️本文首发自前端修罗场(点击加入社区，参与学习打卡，获取奖励)，是一个由资深开发者独立运行的专业技术社区，我专注Web技术、答疑解惑、面试辅导以及职业发展。。1.Babel的原理是什么?babel的转译过程也分为三个阶段，这三步具体是：解析、转换、生成解析Parse:将代码解析⽣成抽象语法树（AS
  • 前端开发深入了解webpack 史努比的大头 前端
    什么是webpackWebpack是一个现代JavaScript应用程序的模块打包工具。它主要用于将各种资源（如JavaScript、CSS、图片等）打包成一个或多个文件，以优化Web应用的加载性能。Webpack的核心功能包括：模块化：支持将代码拆分为模块，便于管理和重用。打包：将多个模块和资源打包成一个或多个文件，减少HTTP请求。加载器（Loaders）：处理不同类型的文件（如转换ES6到E
  • 【Webpack】了解Webpack Sam9029 Webpackwebpack前端node.js
    Sam9029的CSDN博客主页:Sam9029的博客_CSDN博客-前端领域博主‍若此文你认为写的不错，不要吝啬你的赞扬，求收藏，求评论，求一个大大的赞！*文章若有错误或某个内容有更优的解决方案，还望指正！*Webpack了解webpack指南https://webpack.docschina.org/guides/webpack文档https://webpack.docschina.org/前
  • Webpack 概念速通：从入门到掌握构建工具的精髓 tabzzz 前端webpack前端
    Webpack基本概念这里我们先简单熟悉下Webpack的基本概念，我们在搭建项目的时候都会要用到的！这里我们分享的着重点是基本概念而不是具体配置项和使用方法依赖图(dependencygraph)模式(mode)入口(entry)输出(output)加载器(loader)插件(plugin)源映射(SourceMaps)开发服务器(devServer)依赖图（dependencygraph）依赖
  • 高级 - 总结 怕冷的火焰（~杰） nodejs和webpackwebpack
    高级总结:我们从4个角度对webpack和代码进行了优化:​1.提升开发体验使用SourceMap让开发或上线时代码报错能有更加准确的错误提示2.提升webpack打包构建速度使用HotModuleReplacement让开发时只重新编译打包更新变化了的代码,不变的代码使用缓存,从而使更新速度更快使用OneOf让资源文件一旦被某个loader处理了,就不会继续遍历了,打包速度更快使用Include
  • webpack 配置 weixin_44101835 webpack前端node.js
    webpack.base.jsconstpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');constMiniCssExtractPlugin=require('mini-css-extract-plugin');modules.export=function(isDev){return{//入口文件
  • 值得你学习的构建工具-Webpack5.0简化版--五大核心概念 双头雄狮 构建工具学习webpack
    一、Webpack是什么简单来说，webpack就是一个用于现代JavaScript应用程序的静态打包工具，打包过程：从入口文件开始，构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将这些所有模块打包，它们均为静态资源，用于展示你的内容。Webpack5运行于Node.jsv10.13.0+的版本。二、为什么使用Webpack在以前我们开发一个项目的时候，会出现很多.css、.js等类似的
  • js动画html标签（持续更新中） 843977358 htmljs动画mediaopacity
    1.jQuery 效果 - animate() 方法    改变 "div" 元素的高度：    $(".btn1").click(function(){      $("#box").animate({height:"300px
  • springMVC学习笔记 caoyong springMVC
    1、搭建开发环境    a>、添加jar文件，在ioc所需jar包的基础上添加spring-web.jar,spring-webmvc.jar    b>、在web.xml中配置前端控制器       <servlet>     &nbs
  • POI中设置Excel单元格格式 107x poistyle列宽合并单元格自动换行
    引用：http://apps.hi.baidu.com/share/detail/17249059 POI中可能会用到一些需要设置EXCEL单元格格式的操作小结： 先获取工作薄对象: HSSFWorkbook wb = new HSSFWorkbook(); HSSFSheet sheet = wb.createSheet(); HSSFCellStyle setBorder = wb.
  • jquery 获取A href 触发js方法的this参数 无效的情况 一炮送你回车库 jquery
    html如下：  <td class=\"bord-r-n bord-l-n c-333\"> <a class=\"table-icon edit\" onclick=\"editTrValues(this);\">修改</a> </td>"   j
  • md5 3213213333332132 MD5
    import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; public class MDFive { public static void main(String[] args) { String md5Str = "cq
  • 完全卸载干净Oracle11g sophia天雪 orale数据库卸载干净清理注册表
    完全卸载干净Oracle11g A、存在OUI卸载工具的情况下：     第一步：停用所有Oracle相关的已启动的服务；     第二步：找到OUI卸载工具：在“开始”菜单中找到“oracle_OraDb11g_home”文件夹中         &
  • apache 的access.log 日志文件太大如何解决 darkranger apache
    CustomLog logs/access.log common  此写法导致日志数据一致自增变大。 直接注释上面的语法 #CustomLog logs/access.log common 增加： CustomLog "|bin/rotatelogs.exe -l logs/access-%Y-%m-d.log 
  • Hadoop单机模式环境搭建关键步骤 aijuans 分布式
            Hadoop环境需要sshd服务一直开启，故，在服务器上需要按照ssh服务，以Ubuntu Linux为例，按照ssh服务如下： sudo apt-get install ssh sudo apt-get install rsync 编辑HADOOP_HOME/conf/hadoop-env.sh文件，将JAVA_HOME设置为Java
  • PL/SQL DEVELOPER 使用的一些技巧 atongyeye javasql
    1 记住密码 这是个有争议的功能，因为记住密码会给带来数据安全的问题。 但假如是开发用的库，密码甚至可以和用户名相同，每次输入密码实在没什么意义，可以考虑让PLSQL Developer记住密码。 位置：Tools菜单－－Preferences－－Oracle－－Logon HIstory－－Store with password 2 特殊Copy 在SQL Window
  • PHP：在对象上动态添加一个新的方法 bardo 方法动态添加闭包
    有关在一个对象上动态添加方法，如果你来自Ruby语言或您熟悉这门语言，你已经知道它是什么...... Ruby提供给你一种方式来获得一个instancied对象，并给这个对象添加一个额外的方法。   好！不说Ruby了，让我们来谈谈PHP   PHP未提供一个“标准的方式”做这样的事情，这也是没有核心的一部分...   但无论如何，它并没有说我们不能做这样
  • ThreadLocal与线程安全 bijian1013 javajava多线程threadLocal
    首先来看一下线程安全问题产生的两个前提条件：  1.数据共享，多个线程访问同样的数据。  2.共享数据是可变的，多个线程对访问的共享数据作出了修改。    实例：         定义一个共享数据： public static int a = 0;        
  • Tomcat 架包冲突解决 征客丶 tomcatWeb
    环境： Tomcat 7.0.6 win7 x64 错误表象：【我的冲突的架包是：catalina.jar 与 tomcat-catalina-7.0.61.jar 冲突，不知道其他架包冲突时是不是也报这个错误】 严重: End event threw exception java.lang.NoSuchMethodException: org.apache.catalina.dep
  • 【Scala三】分析Spark源代码总结的Scala语法一 bit1129 scala
    Scala语法 1. classOf运算符 Scala中的classOf[T]是一个class对象，等价于Java的T.class,比如classOf[TextInputFormat]等价于TextInputFormat.class    2. 方法默认值 defaultMinPartitions就是一个默认值，类似C++的方法默认值    
  • java 线程池管理机制 BlueSkator java线程池管理机制
    编辑 Add Tools   jdk线程池   一、引言 第一：降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗。第二：提高响应速度。当任务到达时，任务可以不需要等到线程创建就能立即执行。第三：提高线程的可管理性。线程是稀缺资源，如果无限制的创建，不仅会消耗系统资源，还会降低系统的稳定性，使用线程池可以进行统一的分配，调优和监控。  
  • 关于hql中使用本地sql函数的问题（问-答） BreakingBad HQL存储函数
    转自于：http://www.iteye.com/problems/23775 问： 我在开发过程中，使用hql进行查询（mysql5）使用到了mysql自带的函数find_in_set()这个函数作为匹配字符串的来讲效率非常好，但是我直接把它写在hql语句里面（from ForumMemberInfo fm,ForumArea fa where find_in_set(fm.userId,f
  • 读《研磨设计模式》-代码笔记-迭代器模式-Iterator bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.Arrays; import java.util.List; /** * Iterator模式提供一种方法顺序访问一个聚合对象中各个元素，而又不暴露该对象内部表示 * * 个人觉得，为了不暴露该
  • 常用SQL chenjunt3 oraclesqlC++cC#
    --NC建库 CREATE TABLESPACE NNC_DATA01 DATAFILE 'E:\oracle\product\10.2.0\oradata\orcl\nnc_data01.dbf' SIZE 500M AUTOEXTEND ON NEXT 50M EXTENT MANAGEMENT LOCAL UNIFORM SIZE 256K ; CREATE TABLESPA
  • 数学是科学技术的语言 comsci 工作活动领域模型
      从小学到大学都在学习数学，从小学开始了解数字的概念和背诵九九表到大学学习复变函数和离散数学，看起来好像掌握了这些数学知识，但是在工作中却很少真正用到这些知识，为什么？    最近在研究一种开源软件-CARROT2的源代码的时候，又一次感觉到数学在计算机技术中的不可动摇的基础作用，CARROT2是一种用于自动语言分类（聚类）的工具性软件，用JAVA语言编写，它
  • Linux系统手动安装rzsz 软件包 daizj linuxszrz
    1、下载软件 rzsz-3.34.tar.gz。登录linux，用命令 wget http://freeware.sgi.com/source/rzsz/rzsz-3.48.tar.gz下载。 2、解压 tar zxvf  rzsz-3.34.tar.gz 3、安装  cd rzsz-3.34 ; make posix 。注意：这个软件安装与常规的GNU软件不
  • 读源码之:ArrayBlockingQueue dieslrae java
        ArrayBlockingQueue是concurrent包提供的一个线程安全的队列,由一个数组来保存队列元素.通过 takeIndex和 putIndex来分别记录出队列和入队列的下标,以保证在出队列时 不进行元素移动. //在出队列或者入队列的时候对takeIndex或者putIndex进行累加,如果已经到了数组末尾就又从0开始,保证数
  • C语言学习九枚举的定义和应用 dcj3sjt126com c
    枚举的定义 # include <stdio.h> enum WeekDay { MonDay, TuesDay, WednesDay, ThursDay, FriDay, SaturDay, SunDay }; int main(void) { //int day; //day定义成int类型不合适 enum WeekDay day = Wedne
  • Vagrant 三种网络配置详解 dcj3sjt126com vagrant
    Forwarded port Private network Public network Vagrant 中一共有三种网络配置，下面我们将会详解三种网络配置各自优缺点。 端口映射(Forwarded port)，顾名思义是指把宿主计算机的端口映射到虚拟机的某一个端口上，访问宿主计算机端口时，请求实际是被转发到虚拟机上指定端口的。Vagrantfile中设定语法为： c
  • 16.性能优化-完结 frank1234 性能优化
    性能调优是一个宏大的工程，需要从宏观架构(比如拆分，冗余，读写分离，集群，缓存等)， 软件设计（比如多线程并行化，选择合适的数据结构）， 数据库设计层面（合理的表设计，汇总表，索引，分区，拆分，冗余等） 以及微观（软件的配置，SQL语句的编写，操作系统配置等）根据软件的应用场景做综合的考虑和权衡，并经验实际测试验证才能达到最优。 性能水很深， 笔者经验尚浅 ，赶脚也就了解了点皮毛而已，我觉得
  • Word Search hcx2013 search
    Given a 2D board and a word, find if the word exists in the grid. The word can be constructed from letters of sequentially adjacent cell, where "adjacent" cells are those horizontally or ve
  • Spring4新特性——Web开发的增强 jinnianshilongnian springspring mvcspring4
    Spring4新特性——泛型限定式依赖注入 Spring4新特性——核心容器的其他改进 Spring4新特性——Web开发的增强 Spring4新特性——集成Bean Validation 1.1(JSR-349)到SpringMVC  Spring4新特性——Groovy Bean定义DSL Spring4新特性——更好的Java泛型操作API  Spring4新
  • CentOS安装配置tengine并设置开机启动 liuxingguome centos
    yum install gcc-c++  yum install pcre pcre-devel  yum install zlib zlib-devel  yum install openssl openssl-devel Ubuntu上可以这样安装 sudo aptitude install libdmalloc-dev libcurl4-opens
  • 第14章 工具函数（上） onestopweb 函数
    index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
  • Xelsius 2008 and SAP BW at a glance blueoxygen BOXelsius
    Xelsius提供了丰富多样的数据连接方式，其中为SAP BW专属提供的是BICS。那么Xelsius的各种连接的优缺点比较以及Xelsius是如何直接连接到BEx Query的呢？ 以下Wiki文章应该提供了全面的概览。   http://wiki.sdn.sap.com/wiki/display/BOBJ/Xcelsius+2008+and+SAP+NetWeaver+BW+Co
  • oracle表空间相关 tongsh6 oracle
    在oracle数据库中，一个用户对应一个表空间，当表空间不足时，可以采用增加表空间的数据文件容量，也可以增加数据文件，方法有如下几种： 1.给表空间增加数据文件    ALTER TABLESPACE "表空间的名字" ADD DATAFILE    '表空间的数据文件路径' SIZE 50M;   &nb
  • .Net framework4.0安装失败 yangjuanjava .netwindows
    上午的.net framework 4.0，各种失败，查了好多答案，各种不靠谱，最后终于找到答案了 和Windows Update有关系，给目录名重命名一下再次安装，即安装成功了！ 下载地址：http://www.microsoft.com/en-us/download/details.aspx?id=17113 方法： 1.运行cmd，输入net stop WuAuServ 2.点击开
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他