ant-design-pro使⽤总结—⾃定义打包构建配置 这⾥记录⼀些针对性的配置。
壹读ireadhash配置。如何配置 umi.js,umi.css不使⽤hash⽂件名，其他异步加载的⽂件使⽤hash⽂件名?
我们的编译⽣成的index.html⽂件交给了后端，index.html上引⽤的umi.js,umi.css的版本号给后端控制，其他静态资源⽂件如js,css，图⽚则放到cdn服务器上，所以其他⽂件则通过hash⽂件名来控制版本号。umi默认配置hash要么是true要么是false，不能满⾜我们的需求。 怎么办？观察发现打包构建⽣成的⽂件名是4.64e1afbe.chunk.css，4.6cf0f5d2.async.js这种格式，在node_modules中搜 索.async.js，发现相关配置在node_modules/af-webpack下，代码如下：
if (opts.hash) {
webpackConfig.output.filename(`[name].[chunkhash:8].js`).chunkFilename(`[name].[chunkhash:8].async.js`);
}
const hash = !isDev && opts.hash ? '.[contenthash:8]' : '';
webpackConfig.plugin('extract-css').use(require('mini-css-extract-plugin'), [{
filename: `[name]${hash}.css`,
chunkFilename: `[name]${hash}.chunk.css`
}]);
⼿动修改对应内容，发现配置⽣效。但是我们不能直接个性它，⽽是要⽤外部配置来覆盖它。
//css的修改
config.plugin('extract-css').use(require('mini-css-extract-plugin'), [
{
filename: `[name].css`,
chunkFilename: `[name].[contenthash:8].chunk.css`,
},
]);核工业北京地质研究院
//js的修改
config.output.filename('[name].js');
编译，成功。
第三⽅组件src/lib⽂件夹的处理。禁⽤css modules编译以及babel编译处理。 实际开发中，不是所有的依赖都会放到 node_modules中，特别是⼀些我们⾃定义修改过的依赖，在 src/lib⽂件夹下放置这些特殊的依赖组件。组件放在这个⽂件夹下的表现并不跟放到node_modules中⼀样，很多的原⽣构建打包配置都对node_modules作了排除处理，主要是css modules和babel编译的时候，src/lib⽂件夹也需要做对应处理。福克纳
css modules
ant-design-pro默认开启了css modules。
如果css modules作⽤范围不排除src/lib⽂件夹，会导致引⼊组件的样式错乱。
查看config/config.js发现cssLoaderOptions中有个getLocalIdent⽅法，⽤来⽣成css modules最终的class名。有下⾯⼏⾏代码：
if (
) {
return localName;
}
可以看出，node_modules，ant.design.pro.less，global.less 这⼏种⽂件下 css modules 使⽤原始的css class名称，相当于是把这些⽂件排除在css modules作⽤范围之外了。于是我们要排除src/lib⽂件
夹，只需要在这个函数中加⼀⾏：
if (
) {
return localName;
}
babel排除
引⽤src/lib下部分es5写的组件的时候，发现运⾏报错：
中世纪欧洲地图
TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
因为babel转译的时候貌似默认都转成严格模式了。本来只需要exclude⼀下这些组件的，但是umi的配置⾥并没有到相关的项。同样，我们在node_modules/af-webpack下搜索babel相关配置。搜到如下代码：
starswar6
.rule('js')
.test(/\.js$/)
.include.add(opts.cwd)
.end()
.exclude.add(/node_modules/)
.end()
.
use('babel-loader')
.solve('babel-loader'))
.options(babelOpts); // module -> jsx
对应的，我们在fig.js中添加下⾯的代码：
液压元件
.rule('js')
.exclude.add(/\/src\/lib\/webuploader/)
.end();
搞定。
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议