webpack打包原理入门探究（四）插件探究（下）

同名公众号 - 人生代码

于 2020-06-02 07:33:48 发布

阅读量644

点赞数

本文链接：https://blog.csdn.net/qq_36772866/article/details/106513919

版权

webpack打包原理入门探究（四）插件探究（上）

webpack打包原理入门探究（三）入口探究

webpack打包原理入门探究（二）基本配置

webpack打包原理入门探究（一）

多页面 html 生成

let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {
    return path.resolve(__dirname, o)
}
module.exports = {
    entry: {
        main: resolve('src/scripts/main.js'),
        a: resolve('src/scripts/a.js'),
        b: resolve('src/scripts/b.js'),
        c: resolve('src/scripts/c.js')
    }, // 指定入口文件
    output: {
        path: resolve('dist'),
        // filename: '[name]-[hash].js'
        filename: "js/[name]-[chunkhash].js"
    },
    plugins: [
        new htmlWebpackPlugin({
            // filename: "index-[hash].html",
            // filename: 'index-[chunkhash].html',
            filename: "a.html", // 生成 dist/a.html
            template: 'index.html', // 指定根目录下的 index.html
            inject: 'head',
            title: 'html webpack plugin aaaaa'
        }),
        new htmlWebpackPlugin({
            // filename: "index-[hash].html",
            // filename: 'index-[chunkhash].html',
            filename: "b.html", // 生成 dist/b.html
            template: 'index.html', // 指定根目录下的 index.html
            inject: 'head',
            title: 'html webpack plugin bbbbb'
        }),
        new htmlWebpackPlugin({
            // filename: "index-[hash].html",
            // filename: 'index-[chunkhash].html',
            filename: "c.html", // 生成 dist/c.html
            template: 'index.html', // 指定根目录下的 index.html
            inject: 'head',
            title: 'html webpack plugin cccccc'
        }),
    ]
}

多页面 html 生成只加载对应的chunks

let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {
    return path.resolve(__dirname, o)
}
module.exports = {
    entry: {
        main: resolve('src/scripts/main.js'),
        a: resolve('src/scripts/a.js'),
        b: resolve('src/scripts/b.js'),
        c: resolve('src/scripts/c.js')
    }, // 指定入口文件
    output: {
        path: resolve('dist'),
        // filename: '[name]-[hash].js'
        filename: "js/[name]-[chunkhash].js"
    },
    plugins: [
        new htmlWebpackPlugin({
            // filename: "index-[hash].html",
            // filename: 'index-[chunkhash].html',
            filename: "a.html", // 生成 dist/a.html
            template: 'index.html', // 指定根目录下的 index.html
            inject: 'body',
            chunks: ['main', 'a'],
            title: 'html webpack plugin aaaaa'
        }),
        new htmlWebpackPlugin({
            // filename: "index-[hash].html",
            // filename: 'index-[chunkhash].html',
            filename: "b.html", // 生成 dist/b.html
            template: 'index.html', // 指定根目录下的 index.html
            inject: 'body',
            chunks: ['b'],
            title: 'html webpack plugin bbbbb'
        }),
        new htmlWebpackPlugin({
            // filename: "index-[hash].html",
            // filename: 'index-[chunkhash].html',
            filename: "c.html", // 生成 dist/c.html
            template: 'index.html', // 指定根目录下的 index.html
            inject: 'body',
            chunks: ['c'],
            title: 'html webpack plugin cccccc'
        }),
    ]
}

a.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html webpack plugin aaaaa</title>
</head>
<body>
    <!-- 哈哈哈哈哈 -->
    <h5>htmlWebpackPlugin object</h5>
    
            files
            ---
            [object Object]
    
            options
            ---
            [object Object]
    
    <h5>htmlWebpackPlugin.files</h5>
    
            publicPath
            ---
            
    
            chunks
            ---
            [object Object]
    
            js
            ---
            js/main-8a0feb42c16e4b4ccc97.js,js/a-a1ad07a706a1b2702814.js
    
            css
            ---
            
    
            manifest
            ---
            
    
    <h5>htmlWebpackPlugin.options</h5>
    
            template
            ---
            e:\webpackdemo\node_modules\_html-webpack-plugin@3.2.0@html-webpack-plugin\lib\loader.js!e:\webpackdemo\index.html
    
            templateParameters
            ---
            function templateParametersGenerator (compilation, assets, options) {
  return {
    compilation: compilation,
    webpack: compilation.getStats().toJson(),
    webpackConfig: compilation.options,
    htmlWebpackPlugin: {
      files: assets,
      options: options
    }
  };
}
    
            filename
            ---
            a.html
    
            hash
            ---
            false
    
            inject
            ---
            body
    
            compile
            ---
            true
    
            favicon
            ---
            false
    
            minify
            ---
            false
    
            cache
            ---
            true
    
            showErrors
            ---
            true
    
            chunks
            ---
            main,a
    
            excludeChunks
            ---
            
    
            chunksSortMode
            ---
            auto
    
            meta
            ---
            [object Object]
    
            title
            ---
            html webpack plugin aaaaa
    
            xhtml
            ---
            false
    
<script type="text/javascript" src="js/main-8a0feb42c16e4b4ccc97.js"></script><script type="text/javascript" src="js/a-a1ad07a706a1b2702814.js"></script></body>
</html>

b.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html webpack plugin bbbbb</title>
</head>
<body>
    <!-- 哈哈哈哈哈 -->
    <h5>htmlWebpackPlugin object</h5>
    
            files
            ---
            [object Object]
    
            options
            ---
            [object Object]
    
    <h5>htmlWebpackPlugin.files</h5>
    
            publicPath
            ---
            
    
            chunks
            ---
            [object Object]
    
            js
            ---
            js/b-4af1b36b33599d5438fc.js
    
            css
            ---
            
    
            manifest
            ---
            
    
    <h5>htmlWebpackPlugin.options</h5>
    
            template
            ---
            e:\webpackdemo\node_modules\_html-webpack-plugin@3.2.0@html-webpack-plugin\lib\loader.js!e:\webpackdemo\index.html
    
            templateParameters
            ---
            function templateParametersGenerator (compilation, assets, options) {
  return {
    compilation: compilation,
    webpack: compilation.getStats().toJson(),
    webpackConfig: compilation.options,
    htmlWebpackPlugin: {
      files: assets,
      options: options
    }
  };
}
    
            filename
            ---
            b.html
    
            hash
            ---
            false
    
            inject
            ---
            body
    
            compile
            ---
            true
    
            favicon
            ---
            false
    
            minify
            ---
            false
    
            cache
            ---
            true
    
            showErrors
            ---
            true
    
            chunks
            ---
            b
    
            excludeChunks
            ---
            
    
            chunksSortMode
            ---
            auto
    
            meta
            ---
            [object Object]
    
            title
            ---
            html webpack plugin bbbbb
    
            xhtml
            ---
            false
    
<script type="text/javascript" src="js/b-4af1b36b33599d5438fc.js"></script></body>
</html>

c.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>html webpack plugin cccccc</title>
</head>
<body>
    <!-- 哈哈哈哈哈 -->
    <h5>htmlWebpackPlugin object</h5>
    
            files
            ---
            [object Object]
    
            options
            ---
            [object Object]
    
    <h5>htmlWebpackPlugin.files</h5>
    
            publicPath
            ---
            
    
            chunks
            ---
            [object Object]
    
            js
            ---
            js/c-5055009ef9e9d5580df1.js
    
            css
            ---
            
    
            manifest
            ---
            
    
    <h5>htmlWebpackPlugin.options</h5>
    
            template
            ---
            e:\webpackdemo\node_modules\_html-webpack-plugin@3.2.0@html-webpack-plugin\lib\loader.js!e:\webpackdemo\index.html
    
            templateParameters
            ---
            function templateParametersGenerator (compilation, assets, options) {
  return {
    compilation: compilation,
    webpack: compilation.getStats().toJson(),
    webpackConfig: compilation.options,
    htmlWebpackPlugin: {
      files: assets,
      options: options
    }
  };
}
    
            filename
            ---
            c.html
    
            hash
            ---
            false
    
            inject
            ---
            body
    
            compile
            ---
            true
    
            favicon
            ---
            false
    
            minify
            ---
            false
    
            cache
            ---
            true
    
            showErrors
            ---
            true
    
            chunks
            ---
            c
    
            excludeChunks
            ---
            
    
            chunksSortMode
            ---
            auto
    
            meta
            ---
            [object Object]
    
            title
            ---
            html webpack plugin cccccc
    
            xhtml
            ---
            false
    
<script type="text/javascript" src="js/c-5055009ef9e9d5580df1.js"></script></body>
</html>

多页面 html 生成只加载对应的 excludeChunks

let path = require('path')
let htmlWebpackPlugin = require('html-webpack-plugin')
function resolve(o) {
    return path.resolve(__dirname, o)
}
module.exports = {
    entry: {
        main: resolve('src/scripts/main.js'),
        a: resolve('src/scripts/a.js'),
        b: resolve('src/scripts/b.js'),
        c: resolve('src/scripts/c.js')
    }, // 指定入口文件
    output: {
        path: resolve('dist'),
        // filename: '[name]-[hash].js'
        filename: "js/[name]-[chunkhash].js",
        // publicPath: ''
    },
    plugins: [
        new htmlWebpackPlugin({
            // filename: "index-[hash].html",
            // filename: 'index-[chunkhash].html',
            filename: "a.html", // 生成 dist/a.html
            template: 'index.html', // 指定根目录下的 index.html
            inject: 'body',
            chunks: ['main', 'a'],
            excludeChunks: ['b'],
            title: 'html webpack plugin aaaaa'
        }),
        new htmlWebpackPlugin({
            // filename: "index-[hash].html",
            // filename: 'index-[chunkhash].html',
            filename: "b.html", // 生成 dist/b.html
            template: 'index.html', // 指定根目录下的 index.html
            inject: 'body',
            chunks: ['b'],
            excludeChunks: ['c','a'],
            title: 'html webpack plugin bbbbb'
        }),
        new htmlWebpackPlugin({
            // filename: "index-[hash].html",
            // filename: 'index-[chunkhash].html',
            filename: "c.html", // 生成 dist/c.html
            template: 'index.html', // 指定根目录下的 index.html
            inject: 'body',
            chunks: ['c'],
            excludeChunks: ['a', 'b'],
            title: 'html webpack plugin cccccc'
        }),
    ]
}

嗯，这一节课就到此为止了