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('./')