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 多页面应用配置小结

修改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 多页面应用配置小结

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

webpack 多页面应用配置小结
webpack 多页面应用配置小结

自此一个基于CRA的多页面应用webpack配置完成了,其他配置优化可根据自身需求调整。


以上所述就是小编给大家介绍的《webpack 多页面应用配置小结》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

JavaScript

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》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

URL 编码/解码
URL 编码/解码

URL 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具