webpack 多页面应用配置小结
栏目: JavaScript · 发布时间: 4年前
内容简介:今年公司一直在推行前后端分离开发,刚好有个活动开发的需求,于是想用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 配置使用小结
- 工厂模式的个人小结
- 面试小结之并发篇
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
ANSI Common Lisp
Paul Graham / Prentice Hall / 1995-11-12 / USD 116.40
For use as a core text supplement in any course covering common LISP such as Artificial Intelligence or Concepts of Programming Languages. Teaching students new and more powerful ways of thinking abo......一起来看看 《ANSI Common Lisp》 这本书的介绍吧!