antd(+antd-mobile)的customize-cra

2020-03-13 本文已影响0人 rainmanhhh

注意：

若IDE提示安装html-webpack-plugin，只能安装create-react-app自带的版本（可能是beta版，而默认会安装最新的稳定版，造成冲突）
config-overrides.js中如果用node-args读命令行参数，只能读到第一个，故更好的办法是用环境变量传递参数（变量名必须以REACT_APP_开头）
建议安装@types/webpack-dev-server以便IDE进行类型提示

config-overrides.js:

const {override,  fixBabelImports,  overrideDevServer, addWebpackPlugin, addWebpackExternals} = require('customize-cra')
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin') //将moment替换为dayjs，缩小打包体积，package.json和代码中依然正常引入和使用moment即可（不可使用dayjs不支持的高级功能），全部会自动处理
const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer') //分析插件，打包后在build/static/report.html中展示各模块所占的大小
const HtmlWebpackPlugin = require('html-webpack-plugin') //html编译插件，根据变量替换部分内容

const analyze = process.env.REACT_APP_ANALYZE //是否分析打包数据
const externals = process.env.REACT_APP_EXTERNALS //是否使用cdn

module.exports = {
  webpack: override(
    fixBabelImports('antd', {style: 'css'}),
    fixBabelImports('antd-mobile', {style: 'css'}),
    addWebpackPlugin(new AntdDayjsWebpackPlugin()),
    analyze ? addWebpackPlugin(new BundleAnalyzerPlugin({
      analyzerMode: 'static', //输出静态报告文件report.html，而不是启动一个web服务
    })): undefined,
    addWebpackPlugin(new HtmlWebpackPlugin({
      template: `${__dirname}/public/index.html`, //create-react-app默认创建的html文件路径，且build写死了必须使用此文件，故直接以它作为模板
      externals //设置一个externals变量（将会被templateParameters对应的generator传入模板中）
    })),
    externals ? addWebpackExternals({
      'react': 'React',
      'react-dom': 'ReactDom',
      'mobx': 'mobx',
    }): undefined
  ),
  devServer: overrideDevServer()
}

public/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <base href=".">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <!-- region disable cache -->
    <meta content="private,no-cache,no-store,must-revalidate" name="Cache-Control">
    <meta content="Thu Jan 01 1970 08:00:00 GMT" name="Expires">
    <meta content="no-cache" name="Pragma">
    <!-- endregion -->
    <title>app title</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    <!-- region externals -->
    <% if (htmlWebpackPlugin.options.externals) { %>
    <script src="https://cdn.bootcss.com/react/16.13.0/cjs/react.production.min.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.13.0/cjs/react-dom.production.min.js"></script>
    <script src="https://cdn.bootcss.com/mobx/5.15.4/mobx.min.js"></script>
    <% } %>
    <!-- endregion -->
  </body>
</html>

antd(+antd-mobile)的customize-cra

猜你喜欢

热点阅读