webpack2 实践系列（二）— entry 和 output

源码地址：https://github.com/silence717/webpack2-demos

具体可参见 demo02-entry-output 目录下

Entry Points

entry是webpack配置的入口文件的属性，也是整个项目的主入口，其余依赖的模块均在这个文件中引入。
使用方式：entry: string | Array<string>

Output

输出选项告诉webpack如何编写编译后的文件到磁盘。虽然可以有多个入口，但是只要一个输出配置项。
下面列举几个最主要的配置属性:

path

打包后的输出目录地址，是绝对路径。

output: {
    path: __dirname + '/'
}

publicPath

正在研究当中，目前遇到一个dev和build环境image路径的问题，晚点具体补充。

fileName

fileName -- 指定输出文件的名称

output: {
    filename: 'bundle.js'
}

单个entry和 output 配置

webpacl.config.js

module.exports  = {
    entry: './index.js',
    output: {
        filename: 'bundle.js',
        path: __dirname + '/'
    }
};

如果能够保证当前项目只有一个入口，我们还可以简写为：

module.exports = {
    entry: {
        main: './index.js'
    },
    output: {
        filename: 'bundle.js',
        path: __dirname + '/'
    }
};

单个入口配置参照： demo02-entry-output/single 目录下

多个entry 和对于 output

如果我们配置了多个入口那么应该使用提花布，确保每个文件有一个唯一的名称：

• [name] is replaced by the name of the chunk.

• [hash] is replaced by the hash of the compilation.

• [chunkhash] is replaced by the hash of the chunk.

module.exports = {
    entry: {
        indexOne: './indexOne.js',
        indexTwo: './indexTwo.js'
    },
    output: {
        // filename: '[hash].bundle.js',
        filename: '[name].bundle.js',
        path: __dirname + '/'
    }
};

多个入口配置参照： demo02-entry-output/multi 目录下