webpackEntry和Output基础配置

0.jpg

写在前面

前面我们讲解了webpack的核心内容中的loader和plugin，对其概念和作用等都有了一定的认识，在日常的开发中，我们为满足正常的项目需求，会用到各种各样的loader和plugin，有了前面的配置基础，相信这一块大家都能够掌握，那么今天我们再对配置项中的入口entry和出口output做出更全面的讲解。

多入口打包配置

我们来看我们现在的关于入口和出口的配置

    entry: {
        main: './src/index.js',
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },

我们知道当我们entry只配置为一个路径字符串的时候，是相当于我们现在配置成对象的，其意思是我们选择一个入口打包，最终生成的文件叫'main'，当然实际上打包出来的文件叫‘bundle’，这是因为我们在output中做了相应的配置，那我们现在将出口的文件名配置删除点，打包，看是不是打包出来的是entry中的main字段，当然，这个字段是可配置的。

当了解了上面的关系后，我们现在有这样的需求：我希望对入口文件index.js反复打包两次。那么我们先做如下配置打包试试

entry: {
    main: './src/index.js',
    sub: './src/index.js',
},

这时候会发现报错了

Conflict: Multiple chunks emit assets to the same filename bundle.js (chunks main and sub)

意思是我们打包了两次，最终的出口都会叫'bundle.js'这就冲突报错了。于是我们的结局方案如下

output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
},

将出口的文件名配置成一个[name]占位符。这里的占位符可以是[hash]等等，我们用[name]试试，它代表我们配置entry时的key值，这次再打包试试。

我们发现会生成两个js文件分别是main.js和sub.js。并且在html中也会自动引入这俩文件（自动引入和我们之前配置的HTMLWebpackPlugin有关）。

publicPath

我们在日常开发中可能会遇到这种情况，我们打包的html会给后端作为一个部署的入口，但其他的资源文件会放在服务器的其他目录下或者cdn服务器中，这时候html的自动生成的路径肯定是不行的，要想让他符合这个要求，就需要配置output的publicPath选项了，我们做下面的配置再打包试试。

output: {
    publicPath: 'www.cdn.com',
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
},

这时候再打包看，我们的index.html中就会自动加上路径或者cdn地址了。

写在最后

本节就简单讲这么多，，其实关于出口入口的东西，还得靠大家多多看文档。这里文章只做抛砖引玉，就不一一讲解了。