webpack 多页面应用配置小结
栏目: JavaScript · 发布时间: 5年前
内容简介:今年公司一直在推行前后端分离开发,刚好有个活动开发的需求,于是想用react多页面应用去实现。该项目在create-react-app(@3.0.1)脚手架的基础上开发。下载安装create-react-app(@3.0.1,其他版本配置可能略微不同)脚手架,并将CRA中的配置全部反编译到当前项目(方法参考:规范如下(参考微信小程序的文件夹规范)
今年公司一直在推行前后端分离开发,刚好有个活动开发的需求,于是想用react多页面应用去实现。该项目在create-react-app(@3.0.1)脚手架的基础上开发。
准备工作
下载安装create-react-app(@3.0.1,其他版本配置可能略微不同)脚手架,并将CRA中的配置全部反编译到当前项目(方法参考: juejin.im/post/5a5d5b…
建立文件夹规范约束
规范如下(参考微信小程序的文件夹规范)
修改webpack配置
首先修改config文件夹下的paths.js文件,新增如下函数:
// 添加获取多页html模板方法 const getMultiPageHtml = (filePath) => { return globby.sync(filePath, { expandDirectories: { files: ['*.html'] } }) .reduce((arr, file) => { let key = file.replace(/(^src\/|\.html$)/g, ''); return arr.concat([[ key, // 入口 chunk key(用文件路径可保证key唯一性) resolveApp(file), //html template url resolveApp(`src/${key}.js`) //入口js文件 url ]]) }, []); } 复制代码
paths.js导出值中新增multiPageList值:
修改webpack.config.js文件,新增如下函数:
// 新增获取多页面配置 const getMultiPageConfig = (files) => { return files.reduce((data, file) => { const [key, template, appJs] = file; if( fs.existsSync( appJs ) ){ data.entryJs[key] = [ isEnvDevelopment && require.resolve('react-dev-utils/webpackHotDevClient'), appJs ].filter(Boolean); data.htmlPlugins.push( new HtmlWebpackPlugin( Object.assign( {}, { inject: true, chunks: [key], template: template, filename: `${key}.html` }, isEnvProduction ? { minify: { removeComments: true, collapseWhitespace: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, removeStyleLinkTypeAttributes: true, keepClosingSlash: true, minifyJS: true, minifyCSS: true, minifyURLs: true, }, } : undefined ) ) ) } return data; }, { entryJs: { }, htmlPlugins: [ ] }) } const { entryJs, htmlPlugins } = getMultiPageConfig(paths.multiPageList); 复制代码
接着修改entry 和 plugins 配置项:
自此一个基于CRA的多页面应用webpack配置完成了,其他配置优化可根据自身需求调整。
以上所述就是小编给大家介绍的《webpack 多页面应用配置小结》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Zabbix 使用企业微信报警配置小结
- SWAP 常见问题分析和性能调优配置实践小结
- SWAP 常见问题分析和性能调优配置实践小结
- IP2Location Nginx Module 配置使用小结
- 工厂模式的个人小结
- 面试小结之并发篇
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JavaScript
Douglas Crockford / Yahoo Press / 2008-5 / GBP 23.99
Most programming languages contain good and bad parts, but JavaScript has more than its share of the bad, having been developed and released in a hurry before it could be refined. This authoritative b......一起来看看 《JavaScript》 这本书的介绍吧!