入口基础打包

webpack5已经内置了非常多的loader和内置的plugins，基本做到了开箱即用：

json和js直接支持模块化处理，可以使用ES Module的语法
当mode为production的时候，默认使用JS压缩插件 terser-webpack-plugin
...更多的请参考webpack官网

我们先创建一个webpack.config.js，并配置对应的entry

entry 单入口文件打包

const {resolve} = require('path')

const entry = resolve(__dirname, 'src/index.js')

module.exports = {
  entry,
  mode: 'development' || 'production', // 两者都可以
}

entry 多入口文件打包

注意，是多个入口，意味着多个js文件入口，生成多个打包js文件，同时插入html（你可以认为是相互独立的代码，不希望通过相互import混入代码，只不过需要确定一下引入顺序）

const entry = {
  // key 输出的bundle.js的文件名
  // value 路径名称
  main: resolve(__dirname, 'src', 'index.js'),
  second: resolve(__dirname, 'src', 'second.js'),
}

如果entry是string类型的话，默认是打包成main.js文件

但是有个问题，如果你期望打包后的文件是 [key] + bundle.js为文件名呢？

输出路径模板字符串

template-strings

为了解决多入口文件打包问题，webpack内置了资源占位符的识别，在一般的输出路径会自动的匹配：

// 在 多入口文件打包 基础上 +++
const output = {
  path: resolve(__dirname, 'build'),
  filename: '[name].bundle.js',
}

其中name为占位符，对应entry的对象的key。

webpack中有很多输出路径的配置，在这些输出路径的字符串里，我们常用的占位符有：

[name] 文件名（不包含后缀）
[ext] 后缀
[hash] hash字符串，还有 [contenthash] 根据内容生成的hash字符串
[(contenthash | hash) : number] 去hash字符的多少位
[chunkhash] 一个chunk一个hush

细化输出路径

虽然有webpack的output统一配置输出的路径 path和 filename，entry也是可以针对每个entry输出对应的路径的：

const {resolve} = require('path');
// 在entry可以使用相对路径了，不过这个相对路径都是相对 context 的
const context = resolve(__dirname, 'src')
const entry = {
  index: {
    import: './index.js',
    // 输出的路径
    filename: 'pages/catalog.js', // [name] [ext]
  }
}

其实webpack还有非入口js文件的输出选项配置，chunkFileName，但是暂时用不到就先不介绍了

entry 多入口文件合并

场景： index.js并没有导入（import）second.js，而且我希望能把 index.js second.js 和合并到一个 bundle 中。

两种场景：

你单纯的想把两个文件合并到一起
两个文件都很小，没必要分开，分开当发起请求的时候照成浪费，请求消耗时间，但是数据少

const entry = ['index.js', 'second.js']

output.clean

在上面的代码基础上，如果你需要打包成 [name].js，修改webpack的output的filename配置，npx webpack一顿操作之后，发现文件很多，因为上一次打包的文件还留着，因此需要将上一次打包的文件删除

let output = {
  ...output,
  clean: true, // +++
}

总结

代码示例在 code-example / 00-example

00-入口基础打包