【Webpack】3.多入口设置与 html-webpack-pugin 插件详解
发布于 2 个月前 作者 SilenceHVK 1577 次浏览 最后一次编辑是 1 天前 来自 分享

【Webpack】1.入门及简单使用 【Webpack】2.四个核心概念及使用 【Webpack】3.多入口设置与 html-webpack-pugin 插件详解

多入口设置与 html-webpack-pugin 插件详解(Demo3 Source)

  我们可以为 entry 指定多个入口。在开始代码之前,我们需要创建如下目录解构

.        
├── index.html            // 显示的页面
├── main1.js             // webpack 入口1
├── main1.js            // webpack 入口2
├── style.css          // 样式文件
└── webpack.config.js // webpack 中默认的配置文件

  我们在 index.html 文件中输入以下内容:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>demo3</title>
    </head>
    <body>
        
    </body>
    </html>

  我们在 main1.js 文件中输入以下内容:

    import './style.css'
    
    var h1 = document.createElement('h1');
    h1.innertHTML = '这是 main1.js 中的内容';
    document.body.appendChild(h1);

  我们在 main2.js 文件中输入以下内容:

    import './style.css'
    
    var h2 = document.createElement('h2');
    h2.innertHTML = '这是 main2.js 中的内容';
    document.body.appendChild(h2);

  我们在 style.css 文件中输入以下内容:

    h1{ color: red; }
    h2{ color: blue; }

  我们在 webpack.config.js 文件中输入以下内容:

    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const path = require('path');
    
    const config = {
        entry: {
            bundle1: './main1.js',
            bundle2: './main2.js',
        },
        output: {
            path: path.resolve(__dirname,'dist'),
            filename: '[name].js'
        },
        module: {
            rules: [
                { test: /\.css$/, loader: 'style-loader!css-loader' }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({ template: './index.html' })
        ]
    };
    
    module.exports = config;

  完成上面的代码工作后,运行 webapck 命令,我们打开 dist 文件中的 index.htmlindex.html 运行结果

运行的结果并不是我们预期的那样展示 h1 的内容在前,h2 内容在后,打开生成后的 index.html 源码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>demo3</title>
    </head>
    <body>
        <script type="text/javascript" src="bundle2.js"></script>
        <script type="text/javascript" src="bundle1.js"></script>
    </body>
    </html>

从源码中便可得知,先引入的 bundle2.js 文件,也就是 main2.js 的内容,后引入的 bundle1.js 文件,也就是 main1.js 的内容。

  我们并没有在 index.html 中输入任何引入 JavaScript 文件的代码,那么使用 webpack 打包后生成的文件,是怎么引入 JavaScript 文件的呢。事实上就是通过 html-webpack-plugin 为我们生成的 index.html

html-webpack-plugin 中的参数详解

  通过 npm 中的介绍,html-webpack-plugin 是一个 webpack 插件,可以简化 HTML 文件的创建,为我们的 webpack 包提供服务,它包含了一个改变每个编译的文件名参数。使用 lodash 模板提供我们自己的模板或者使用自己的 loader

  我们可以配置以下参数传递给 HtmlWebpackPlugin

  • title: 用于生成的 HTML 文档的标题。
  • filename: 要写入 HTML 的文件。默认为 index.html 。你也可以在这里指定一个子目录(例如:assets / admin.html)。
  • template: 引入的模板文件,具体内容可以查看文档
  • inject: true | 'head' | 'body' | false,指定引入 JavaScript 脚本文件,在生成的HTML 中的位置。默认为 true,指JavaScript 脚本文件在 <body> 元素中引入;head ,指JavaScript 脚本文件在 <head> 元素中引入,bodytrue 值相同;false 指只生成 HTML 文件,不引入任何JavaScript 脚本文件。
  • favicon: 生成的 HTML 文件中的图标路径。
  • minify: {...} | false 是否对生成的 HTML 文件压缩,默认为 false,具体配置可查看 html-minifier
  • hash: true | false ,如果为 true ,给生成的 js 文件一个独特的 hash 值,该 hash 值是该次 webpack 编译的 hash 值,这对缓存清除非常有用。默认值为 false
  • cache: true | false, 如果为 true 则只编译生成更改的内容将文件,默认值为 true
  • showErrors:true | false,如果为 true,则将错误内容添加到 HTML 中,默认值为 true
  • chunks: 指定引入的 JavaScript 脚本文件(例如:[ ‘bundle1’, ‘bundle2’ ])。
  • chunksSortMode: 'none' | 'auto' | 'dependency' |'manual' | {function} - default: 'auto',对引入的 chunks 进行排序,具体可以查看该文档
  • excludeChunks: 排除掉指定的 JavaScript 脚本文件(例如:[ ‘bundle1’, ‘bundle2’ ])。
  • xhtml: true | false,默认值是 false ,如果为 true ,则以兼容 xhtml 的模式引用文件。

  现在我们知道了 html-webpack-plugin 中的参数,下面我们就来修改 webpack.config.js 中的内容:

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

    const config = {
        entry: {
            bundle1: path.resolve(__dirname,'main1.js'),
            bundle2: path.resolve(__dirname,'main2.js')
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].js'
        },
        module: {
            rules: [
                { test: /\.css$/, loader: 'style-loader!css-loader' }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({ 
                title: '多文件引入', // 生成 html 的标题
                filename: 'index.html',// 生成 html 文件的名称 
                template: path.resolve(__dirname,'index.html'), // 根据自己的指定的模板文件来生成特定的 html 文件 
                // inject: true, // 注入选项 有四个值 ture: 默认值,script标签位于html文件的 body 底部, body: 同 true, head: script标签位于html文件的 head 底部,false:不注入script标签
                favicon: path.resolve(__dirname,'favicon.ico'), // 生成的 html 文件设置 favicon
                minify: {
                    caseSensitive: false, //是否大小写敏感
                    collapseBooleanAttributes: true, //是否简写boolean格式的属性如:disabled="disabled" 简写为disabled 
                    collapseWhitespace: true //是否去除空格
                },
                hash: true, // hash选项的作用是 给生成的 js 文件一个独特的 hash 值,该 hash 值是该次 webpack 编译的 hash 值。默认值为 false
                cache: true, // 默认值是 true。表示只有在内容变化时才生成一个新的文件
                showErrors: true, // showErrors 的作用是,如果 webpack 编译出现错误,webpack会将错误信息包裹在一个 pre 标签内,属性的默认值为 true
                chunks: [ 'bundle1', 'bundle2' ], // 指定引入的 js 文件
                //excludeChunks:[ 'bundle1' ], // 排除掉某些 js 文件
                /**
                 * script 标签的引用顺序
                 * 'dependency' 按照不同文件的依赖关系来排序
                 * 'auto' 默认值,插件的内置的排序方式
                 * 'none'
                 * 'manual'
                 * funciton 自定义排序,与JS中自定义数组的sort回调一个含义, 具体可以看 https://github.com/jantimon/html-webpack-plugin/issues/481
                 */
                chunksSortMode: function(chunk1,chunk2){
                    var orders = [ 'bundle1' , 'bundle2' ];
                    var order1 = orders.indexOf(chunk1.names[0]);
                    var order2 = orders.indexOf(chunk2.names[0]);
                    return order1 - order2;
                },
                xhtml: false // 一个布尔值,默认值是 false ,如果为 true ,则以兼容 xhtml 的模式引用文件
            })
        ]
    };

module.exports = config;

  完成上面的代码工作后,运行 webapck 命令,我们打开 dist 文件中的 index.html。 index.html 运行结果   Nice!与我们的预期效果显示一致。在对 html-webpack-plugin 的介绍中,提到了 lodash 模板, 那么该怎么用呢?我们再次修改 webpack.config.js 中的内容,为 HtmlWebpackPlugin 传入 Date 参数:

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

    const config = {
        entry: {
            bundle1: path.resolve(__dirname,'main1.js'),
            bundle2: path.resolve(__dirname,'main2.js')
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].js'
        },
        module: {
            rules: [
                { test: /\.css$/, loader: 'style-loader!css-loader' }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({ 
                date: new Date(),
                title: '多文件引入', // 生成 html 的标题
                filename: 'index.html',// 生成 html 文件的名称 
                template: path.resolve(__dirname,'index.html'), // 根据自己的指定的模板文件来生成特定的 html 文件 
                // inject: true, // 注入选项 有四个值 ture: 默认值,script标签位于html文件的 body 底部, body: 同 true, head: script标签位于html文件的 head 底部,false:不注入script标签
                favicon: path.resolve(__dirname,'favicon.ico'), // 生成的 html 文件设置 favicon
                minify: {
                    caseSensitive: false, //是否大小写敏感
                    collapseBooleanAttributes: true, //是否简写boolean格式的属性如:disabled="disabled" 简写为disabled 
                    collapseWhitespace: true //是否去除空格
                },
                hash: true, // hash选项的作用是 给生成的 js 文件一个独特的 hash 值,该 hash 值是该次 webpack 编译的 hash 值。默认值为 false
                cache: true, // 默认值是 true。表示只有在内容变化时才生成一个新的文件
                showErrors: true, // showErrors 的作用是,如果 webpack 编译出现错误,webpack会将错误信息包裹在一个 pre 标签内,属性的默认值为 true
                chunks: [ 'bundle1', 'bundle2' ], // 指定引入的 js 文件
                //excludeChunks:[ 'bundle1' ], // 排除掉某些 js 文件
                /**
                 * script 标签的引用顺序
                 * 'dependency' 按照不同文件的依赖关系来排序
                 * 'auto' 默认值,插件的内置的排序方式
                 * 'none'
                 * 'manual'
                 * funciton 自定义排序,与JS中自定义数组的sort回调一个含义, 具体可以看 https://github.com/jantimon/html-webpack-plugin/issues/481
                 */
                chunksSortMode: function(chunk1,chunk2){
                    var orders = [ 'bundle1' , 'bundle2' ];
                    var order1 = orders.indexOf(chunk1.names[0]);
                    var order2 = orders.indexOf(chunk2.names[0]);
                    return order1 - order2;
                },
                xhtml: false // 一个布尔值,默认值是 false ,如果为 true ,则以兼容 xhtml 的模式引用文件
            })
        ]
    };

module.exports = config;

更改 index.html 中的内容,lodash 模板默认支持的是 ejs 模板的语法:

    <!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>demo3</title>
    </head>
    <body>
        <%= htmlWebpackPlugin.options.date %>
    </body>
    </html>

  完成上面的代码工作后,运行 webapck 命令,我们打开 dist 文件中的 index.html。 index.html 运行结果

  通过运行结果,我们可以发现在顶部输出了当前时间,也就是 HtmlWebpackPlugin 传入的参数,实际上 HtmlWebpackPlugin 中的参数都可以通过 htmlWebpackPlugin.options.参数名称 输出,我就不一一列举。

17 回复

很浅显易懂。

请问webpack怎么去除打包生成的map文件。我是用create-react-app脚手架创建的

@fruit-memory
你需要使用 Eject 出配置

	$ npm run eject

然后项目文件中会多出 configscripts 文件夹,打开 config 中的 webpack.config.prod.js 配置文件,找到如下代码

	const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';

shouldUseSourceMap 改为 false

	const shouldUseSourceMap = false;

,这样build 后就不会生成 map 文件了。

@SilenceHVK 一路看下来,温习了一遍,感谢。 我写 React 和 ReactNative 都用「 create-react-app」 这种快速配置, Webpack 之前配置过 React 头疼。这要如何是好?

非常感谢分享

@hi363138911 个人觉得,webpack 其实只是一个打包工具,并不需要研究的非常透彻。像那些脚手架就让 github 的大神去开发和维护就好了,像我这样的凡人,只需要清楚需要修改的配置在哪里修改就可以了。

@fruit-memory 能解决你的问题就好

nice,感谢分享

贴的代码里面有多个地方拼写错误

  1. “improt” ->“import”
  2. “innertHTML”->“innnerHTML”
  3. “pugins”->“plugins”

真是麻烦呀,用 dawn 啊,https://github.com/alibaba/dawn 在工程根目录建立 .dawn/pipe.yml,贴入如下配置就成了

# 启动开发服务
dev:
  - name: webpack
    entry: ./src/*.js
    template: ./assets/*.html
    watch: true
  - name: server
    port: 8001
    
# 直接构建
buid:
  - name: webpack
    entry: ./src/*.js
    template: ./assets/*.html

这难到是要为每个页面独立设置一个配置文件吗?

@hubinbin91 感谢提醒,已更改

@ugrg 您是指 入口文件还是 webpack 的配置文件?

@houfeng 感谢大佬点醒

回到顶部