3、Webpack示例2-webpack多入口配置

前言

    通过上一节的学习，你应该已经掌握及基础了webpack配置，这一节，你将在上一节的基础上学习如何配置webpack的多入口配置以及对应的输出配置

开始配置

    在上一节配置不变的情况下，我们将主要对webpack.config.js中的entry和output进行修改

    entry使用字符串数组（多个入口文件生成单一chunk）

          entry使用字符串数组，每一个字符串对应一个入口文件

entry: [__dirname + '/src/script/main.js', __dirname + '/src/script/a.js']

          output不变；在指定目录下创建a.js文件

function helloWebpack_a() {
    alert("这里是a.js");
}
helloWebpack_a();

          output不变

module.exports = {
    entry: [__dirname + '/src/script/main.js', __dirname + '/src/script/a.js'],
    output: {
        path: __dirname + '/dist',// 打包输出文件路径
        filename: 'js/bundle.js'// 打包输出文件路径+文件名
    }
}

          命令行运行 npm run webpack，entry中指定的两个文件被打包到一个文件中

          浏览器打开index.html，发现main.js和a.js文件中的内容生效，且执行顺序和entry数组中的先后顺序一致

    entry使用对象（可以指定多个入口文件生成多个chunk）

          entry使用对象，每一个key对应一个入口文件，value对应的是入口文件；output配置不变

module.exports = {
    // entry: [__dirname + '/src/script/main.js', __dirname + '/src/script/a.js'],
    entry: {
        main: __dirname + '/src/script/main.js',
        a: __dirname + '/src/script/a.js'
    },
    output: {
        path: __dirname + '/dist',// 打包输出文件路径
        filename: 'js/bundle.js'// 打包输出文件路径+文件名
    }
}

          命令行运行 npm run webpack，打包失败，提示错误信息为：多个chunk指向了同一个资源文件bundle.js

          这里就需要用到output中的占位符来区别不同chunk生成的文件名

              [name]：与entry的key相同

              [hash]：同一次打包的hash相同，可以通过在后面加 :5 指定生成hash的长度

              [chunkHash]：同一个chunk中的chunkHash相同，可以指定长度；两次打包，如果入口文件的内容没有发生改变，则chunkHash也不会发生改变，所以chunkHash可以理解为是入口文件的一个MD5，可以当做版本号使用

          因此，上面出现的错误可以使用占位符的方式来解决；以下六种方式，有兴趣可以全部打包验证

module.exports = {
    // entry: [__dirname + '/src/script/main.js', __dirname + '/src/script/a.js'],
    entry: {
        main: __dirname + '/src/script/main.js',
        a1: __dirname + '/src/script/a.js'
    },
    output: {
        path: __dirname + '/dist',// 打包输出文件路径
        // filename: 'js/[name]-[hash]-bundle.js'// 打包输出文件路径+文件名
        // filename: 'js/[name]-[chunkHash]-bundle.js'// 打包输出文件路径+文件名，两次打包，只有改变文件内容或key时，chunkHash会发生改变
        // filename: 'js/[name]-bundle.js'// 打包输出文件路径+文件名
        // filename: 'js/[chunkHash]-bundle.js'// 打包输出文件路径+文件名
        // filename: 'js/[hash]-bundle.js'// 这里会发生覆盖的情况，a.js打包文件会覆盖掉main.js打包文件
        // filename: 'js/[hash]-[chunkHash]-bundle.js'// 这里报错，是[hash]和[chunkHash]不能同时使用        
    }
}

         在index.html中引入分别引入两个打包文件查看效果

小结

    通过本节你应该学会了webpack多入口文件的基本配置，并知道了部分占位符的使用。通过下一节你将学习更多关于webpack的知识