webpack多入口文件页面打包配置详解
97 浏览量
2020-08-28
07:48:50
上传
评论
收藏 84KB PDF 举报
webpack多入口文件页面打包配置详解多入口文件页面打包配置详解
本篇文章主要介绍了webpack多入口文件页面打包配置详解，小编觉得挺不错的，现在分享给大家，也给大家
做个参考。一起跟随小编过来看看吧
大多数情况下，我们使用 webpack来打包单页应用程序，这个时候只需要配置一个入口，一个模板文件，但也不尽是如此，
有时候也会碰到多页面的项目，而且以我的经验来看，这种情况出现的频率还不低，例如项目比较大，无法进行全局的把握，
或者项目需要多次的更新迭代等，都适合做成多页面程序，这就涉及到了 webpack的多页面文件的打包配置问题。
手动配置手动配置
单页应用程序和多页应用程序的 webpack配置文件其实绝大部分都还是相同的，只不过多页的配置需要在单页配置的基础上
顾及到多个页面罢了，loader、output、plugins这些基本都不需要改动，需要改动的一般都是入口文件 entry，如果你用到了
抽离css样式的插件 extract-text-webpack-plugin、自动模板插件 html-webpack-plugin的话，那么还需要对这两个插件进行额
外的改写，大多数情况下，我们也都只需要改动这三个地方，所以本文就只简单说下这三个位置，如果在实际的项目中还有其
他的地方需要改动，参照这三个位置即可。
示例的文件目录如下：
entry
单页应用程序的入口配置一般如下所示：
entry: resolve(__dirname, "src/home/index.js")
这个配置就是指定 webpack从 /src/home/index.js这个文件开始进入，进行一系列的打包编译过程。
如果是多页应用程序，则需要多个入口文件，例如：
entry: {
home: resolve(__dirname, "src/home/index.js"),
about: resolve(__dirname, "src/about/index.js")
}
这样，整个项目就有了两个入口 home和 about
extract-text-webpack-plugin
extract-text-webpack-plugin 插件主要是为了抽离css样式，防止将样式打包在 js中引起页面样式加载错乱的现象，单页程序
中，一般这样使用此插件：
plugins: [
new ExtractTextPlugin('style.[contenthash].css')
]
而到了多页程序，因为存在多个入口文件以及对应的多个页面，每个页面都有自己的 css样式，所以需要为每个页面各自配置
一下：
plugins: [
new ExtractTextPlugin('home/[name].[contenthash].css'),
new ExtractTextPlugin('about/[name].[contenthash].css')
]
除此之外还需要注意一点，每个页面也只需要自己的 css样式，理论上把别的页面 css样式文件也打包到自己的页面中当然也
是可以的，但显然是不合理的，这只会增加冗余代码，还可能会导致不可预测的样式覆盖等问题，所以需要对下面这种
loader配置进行修改：
{
资源评论
