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

1. 多个入口文件

首先，在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'
    }
    
}

2. 多个出口文件

到这里，好像还是多入口对应一个出口，我们还需要修改一下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文件中，这个插件就可以帮我们实现这些。

1. 本地安装这个插件，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'
        })
    ]
    
}

2. 配置生成多个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'
        })
    ]
    
}

打包之后

3. 怎么让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'
        })
    ]
    
}

总结一下html-webpack-plugin插件中常用的配置：

• template: ‘相对路径’，作用：加载对应的模板文件；
• title: ‘标题’，作用：在页面中动态生成标题；
• hash: true，作用：清除浏览器缓存，保证每次都加载最新的数据；
• minify: {…}，作用：压缩文件的操作；
• filename: ‘生成的文件名’,作用：用于定义生成多个HTML文件的文件名；
• chunks: [入口文件名]，作用：将对应的文件打入对应的HTML文件中。

参考链接：https://www.jianshu.com/p/6ce74871189a