create-react-app +antd + webpack 打包配置路径问题

React + Webpack + React-route-dom + Antd 

1、为打包的组件取名字 (AsyncComponent  是一个JS 组件)

//import A from './pages/A';

//import B from './pages/B';

const A = AsyncComponent(() => import(/* webpackChunkName: "A" */'./pages/A'));

const B = AsyncComponent(() => import(/* webpackChunkName: "B" */'./pages/B'));

上面的import()是webpack2以上版本的写法,注意/* webpackChunkName: "A" */,这里对应的就是webpack里的chunkFilename里的[name]


2、修改 antd 主题

3、webpack配置
webpack.config.prod.js

注释 就不会生成  .map文件

// devtool: shouldUseSourceMap ? 'source-map' : false,

缩短打包时间,文件大小减少

4、打包找不到文件路径解决方法:

4.1、修改 publicPaht 路径为相对路径

//const publicPath = paths.servedPath;

const publicPath = './';

4.2、修改css路径为相对路径

const extractTextPluginOptions = shouldUseRelativeAssetPaths

  ? // Making sure that the publicPath goes back to to build folder.

  { publicPath: Array(cssFilename.split('/').length).join('../') }

  : {};

cssFilename.split('./')

你可能感兴趣的:(create-react-app +antd + webpack 打包配置路径问题)