webpack深入了解——多入口、多出口以及html-webpack-plugin

63 阅读 0 评论 42 点赞

我是靠谱客的博主尊敬柠檬，最近开发中收集的这篇文章主要介绍webpack深入了解——多入口、多出口以及html-webpack-plugin，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

多个入口文件

首先，在src目录下定义一个main2.js，然后在webpack.config.js文件当中，将entry属性改写一下，如下：

******webpack.config.js文件********

const path = require('path');
module.exports = {
    entry: ['./src/main.js', './src/main2.js'], //多入口的时候，这样写
    output: {//出口配置
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
    
}

多个出口文件

到这里，好像还是多入口对应一个出口，我们还需要修改一下filename中的数据，我们可以写成这样filename:‘[name].bundle.js’，这里的[name]就好比是一个占位符，会把我们多个入口文件的名字替换到这里。最终，代码如下：

const path = require('path');
module.exports = {
    entry: {
        main: './src/main.js',
        main2: './src/main2.js'
    },
    output: {//出口配置
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    }
    
}

在这里插入图片描述
3. html-webpack-plugin插件

我们最好是让dist目录自己创建，然后index.html也自己创建并且我们打包的多入口文件自动写好在index.html文件中，这个插件就可以帮我们实现这些。

本地安装这个插件，npm i html-webpack-plugin -D

然后，在webpack.config.js中导入这个模块，然后在plugins属性身上创建一个html-webpack-plugin的实例。

webpack.config.js文件，如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        main: './src/main.js',
        main2: './src/main2.js'
    },
    output: {//出口配置
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
    }

webpack.config.js文件配置：
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        main: './src/main.js',
        main2: './src/main2.js'
    },
    output: {//出口配置
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({ // 老铁这样写，没毛病。
            template: './src/index.html'
        })
    ]
    
}

配置生成多个HTML文件

我们先在src目录下创建一个index2.html的模板文件，然后webpack.config.js文件，如下：

webpack.config.js文件，如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        main: './src/main.js',
        main2: './src/main2.js'
    },
    output: {//出口配置
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            filename:'index.html',
            hash: true,
            title: '你好，世界',
            template: './src/index.html'
        }),

        new HtmlWebpackPlugin({
            filename:'index2.html',
            hash: true,
            title: 'hello world',
            template: './src/index2.html'
        })
    ]
    
}

打包之后
在这里插入图片描述

怎么让js文件分别打包到对应的HTML文件当中

可以通过chunks属性，来分别告诉实例对象，你只负责添加这个js文件就好，注意chunks是个数组。

webpack.config.js文件，如下：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        main: './src/main.js',
        main2: './src/main2.js'
    },
    output: {//出口配置
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    plugins: [
        new HtmlWebpackPlugin({
            chunks: ['main'], // 这个名字，就是入口定义的名字
            filename:'index.html',
            hash: true,
            title: '你好，世界',
            template: './src/index.html'
        }),

        new HtmlWebpackPlugin({
            chunks:['main2'],
            filename:'index2.html',
            hash: true,
            title: 'hello world',
            template: './src/index2.html'
        })
    ]
    
}