webpack多入口文件页面打包配置详解


Posted in Javascript onJanuary 09, 2018

大多数情况下,我们使用 webpack来打包单页应用程序,这个时候只需要配置一个入口,一个模板文件,但也不尽是如此,有时候也会碰到多页面的项目,而且以我的经验来看,这种情况出现的频率还不低,例如项目比较大,无法进行全局的把握,或者项目需要多次的更新迭代等,都适合做成多页面程序,这就涉及到了 webpack的多页面文件的打包配置问题。

手动配置

单页应用程序和多页应用程序的 webpack配置文件其实绝大部分都还是相同的,只不过多页的配置需要在单页配置的基础上顾及到多个页面罢了,loader、output、plugins这些基本都不需要改动,需要改动的一般都是入口文件 entry,如果你用到了 抽离css样式的插件 extract-text-webpack-plugin、自动模板插件  html-webpack-plugin的话,那么还需要对这两个插件进行额外的改写,大多数情况下,我们也都只需要改动这三个地方,所以本文就只简单说下这三个位置,如果在实际的项目中还有其他的地方需要改动,参照这三个位置即可。

示例的文件目录如下:

webpack多入口文件页面打包配置详解 

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配置进行修改:

{
  test: /\.css$/,
  loader: 'style!css!autoprefixer'
},
{
  test: /\.scss$/,
  loaders: [
   'style',
   'css?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
   'sass',
   'autoprefixer'
  ]
},

上面的配置会把所有编译出来的 css文件打包到同一个文件中,我们要做的就是把这些 css分离开,每个页面都有各自单独的 css样式文件:

// 为每个页面定义一个 ExtractTextPlugin
const homeExtractCss = new ExtractTextPlugin('home/[name].[contenthash].css')
const aboutExtractCss = new ExtractTextPlugin('about/[name].[contenthash].css')
// ...
module: {
  rules: [
   // 每个页面的 ExtractTextPlugin 只处理这个页面的样式文件
  {
    test: /src(\\|\/)home(\\|\/)css(\\|\/).*\.(css|scss)$/,
    use: homePageExtractCss.extract({
     fallback: 'style-loader',
     use: ['css-loader', 'postcss-loader', 'sass-loader']
    })
   },
   {
    test: /src(\\|\/)about(\\|\/)css(\\|\/).*\.(css|scss)$/,
    use: salePersonalCenterExtractCss.extract({
     fallback: 'style-loader',
     use: ['css-loader', 'postcss-loader', 'sass-loader']
    })
   }
 ]
}
// ...
// 每个页面都有各自的 ExtractTextPlugin,所以需要都声明一遍
plugins: [
  homeExtractCss,
  aboutExtractCss
]

html-webpack-plugin

html-webpack-plugin插件的使用,在单页应用程序和多页应用程序中的 webpack配置没什么区别

new HtmlWebpackPlugin({
  filename: 'home/home.html',
  template: 'src/home/html/index.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true
  }
 })
 new HtmlWebpackPlugin({
  filename: 'about/about.html',
  template: 'src/about/html/index.html',
  inject: true,
  minify: {
    removeComments: true,
    collapseWhitespace: true
  }
 })

有几个页面,就对每个页面进行上述配置即可。

自动配置

上述的配置代码已经可以满足多页面开发需求了,但是有一点似乎有些遗憾,那就是每增加一个页面,就需要更新一遍 entry、extract-text-webpack-plugin、HtmlWebpackPlugin的配置,虽然只是几行代码的问题,而且基本上都是复制粘贴没什么难度,但毕竟代码再少也需要过问,并且需要改的地方比较多,仓促之下可能还会遗漏,要是能一劳永逸,写一遍代码,无论以后增删页面都不需要过问就好了。

稍微观察下这个目录就可以发现,这个目录结构其实是很有规律的:

webpack多入口文件页面打包配置详解 

每个页面都是 src/目录下的一个文件夹,这个文件夹中有两个子目录,分别存放这个页面的模板 html,样式文件 css,还有一个入口文件 index.js

既然有规则,那么肯定是可以进行程序编码的,如果按照这种规则,每个页面都是 ./src下的一个目录,目录名即为页面名,并且这个目录中的结构也都是相同的,那么可以通过一个通用方法来获取所有的页面名称(例如 home、about),这个通用方法的一个示例如下:

function getEntry () {
 let globPath = 'src/**/html/*.html'
 // (\/|\\\\) 这种写法是为了兼容 windows和 mac系统目录路径的不同写法
 let pathDir = 'src(\/|\\\\)(.*?)(\/|\\\\)html'
 let files = glob.sync(globPath)
 let dirname, entries = []
 for (let i = 0; i < files.length; i++) {
  dirname = path.dirname(files[i])
  entries.push(dirname.replace(new RegExp('^' + pathDir), '$2'))
 }
 return entries
}

借助 glob这个库,遍历 .src/目录下具有这种规律 src/**/html/*.html的子目录,通过正则匹配出这个子目录的名称
获取到了所有的页面名称,下面就好办了。

entry

// entry: resolve(__dirname, "src/home/index.js")
// 改为
entry: addEntry()
//...
function addEntry () {
 let entryObj = {}
 getEntry().forEach(item => {
  entryObj[item] = resolve(__dirname, 'src', item, 'index.js')
 })
 return entryObj
}

extract-text-webpack-plugin

// plugins: [
 // new ExtractTextPlugin('home/[name].[contenthash].css'),
 // new ExtractTextPlugin('about/[name].[contenthash].css')
//]
// 改为
const pageExtractCssArray = []
getEntry().forEach(item => {
 pageExtractCssArray.push(new ExtractTextPlugin(item + '/[name].[contenthash].css'))
})
// ...
plugins: [...pageExtractCssArray]

module.rules样式相关的两个loaders删掉,改为动态添加:

getEntry().forEach((item, i) => {
 webpackconfig.module.rules.push({
  test: new RegExp('src' + '(\\\\|\/)' + item + '(\\\\|\/)' + 'css' + '(\\\\|\/)' + '.*\.(css|scss)$'),
  use: pageExtractCssArray[i].extract({
   fallback: 'style-loader',
   use: ['css-loader', 'postcss-loader', 'sass-loader']
  })
 })
})
// ...
module.exports = webpackconfig

html-webpack-plugin

plugins中无需手动初始化 html-webpack-plugin,改为动态添加:

getEntry().forEach(pathname => {
 let conf = {
  filename: path.join(pathname, pathname) + '.html',
  template: path.join(__dirname, 'src', pathname, 'html', 'index.html')
 }
 webpackconfig.plugins.push(new HtmlWebpackPlugin(conf))
})
// ...
module.exports = webpackconfig

完成了上述修改后,以后无论是在项目中添加页面还是删除页面,都无需再对  webpack配置进行手动修改了,虽然开始时开起来似乎这种动态的自动配置代码比较多,而且稍微复杂一点,但是从长期来看,绝对是一劳永逸的好做法。

另外,如果你的项目目录结构和我示例的目录结构不一样,那么就需要你根据自己的目录结构对代码进行少许的修改,但整体解决问题的方法是不变的,一个易于维护的项目,目录结构都该是有律可循的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(2)
Dec 23 Javascript
JQUERY 对象与DOM对象之两者相互间的转换
Apr 27 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
js实现div闪烁原理及实现代码
Jun 24 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
Jun 10 jQuery
express框架下使用session的方法
Jul 31 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 Javascript
Vue项目组件化工程开发实践方案
Jan 09 #Javascript
详解webpack之scss和postcss-loader的配置
Jan 09 #Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 #Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 #Javascript
详解webpack babel的配置
Jan 09 #Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 #Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
Jan 09 #Javascript
You might like
全国FM电台频率大全 - 31 新疆维吾尔族自治区
2020/03/11 无线电
建立动态的WML站点(二)
2006/10/09 PHP
PHP产生随机字符串函数
2006/12/06 PHP
Discuz! Passport 通行证整合
2008/03/27 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
Bootstrap媒体对象学习使用
2017/03/07 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
用Python展示动态规则法用以解决重叠子问题的示例
2015/04/02 Python
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
详解在Python和IPython中使用Docker
2015/04/28 Python
python在html中插入简单的代码并加上时间戳的方法
2018/10/16 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
keras 多gpu并行运行案例
2020/06/10 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
会计专业毕业生自荐信范文
2013/12/20 职场文书
市场营销个人求职信范文
2014/02/02 职场文书
小学数学国培感言
2014/03/10 职场文书
维稳工作情况汇报
2014/10/27 职场文书
2014年评职称工作总结
2014/11/20 职场文书
自荐信模板大全
2015/03/27 职场文书
行政前台岗位职责
2015/04/16 职场文书
欢送会主持词
2015/07/01 职场文书
检举信的写法
2019/04/10 职场文书
golang实现浏览器导出excel文件功能
2022/03/25 Golang