The Kylin framework supports extending Webpack, Babel, and Express configurations.
Procedure
Extend the Webpack, Babel, and Express configuration as follows:
- Create
plugin.js
in the root directory of the project. Add the following configuration item to
kylinApp.plugins
inpackage.json
:// In package.json
{
"kylinApp": {
"plugins": [
"module:./plugin.js"
]
}
}
In
plugin.js
, write the following code. In themodifyWebpackConfig
andmodifyBabelConfig
functions, modify the originalwebpack
andbabel
configuration.
// In plugin.js
exports.pluginName = '@ali/kylin-plugin-custom';
exports.default = function () {
return {
webpack: function modifyWebpackConfig(webpackConfig) {
console.log('webpackConfig', webpackConfig);
return webpackConfig;
},
babel: function modifyBabelConfig(babelConfig) {
console.log('babelConfig', babelConfig);
return babelConfig;
},
express: function modifyExpress(expressInstance) {
expressInstance.use(/* some middleware */);
}
}
}
Examples
Access the httpProxy plug-in
Note: The kylin-build package version should be 0.1.49 or higher.
- Run the following command to install
http-proxy-middleware
.cnpm install --save-dev http-proxy-middleware
- Modify the
express
of the httpProxy plug-in.// In plugin.js
var proxy = require('http-proxy-middleware');
exports.pluginName = '@ali/kylin-plugin-custom';
exports.default = function () {
return {
express: function modifyExpress(expressInstance) {
expressInstance.use(
proxy('/api', {target: 'http://www.baidu.com'})
// For more configuration information, see the http-proxy-middleware module documentation.
);
}
}
}
Access the px2rem plug-in
- Run the following command to install
postcss-px2rem
.cnpm install --save-dev postcss-px2rem
- Modify
Webpack
of the px2rem plug-in.// In plugin.js
var px2rem = require('postcss-px2rem');
exports.pluginName = '@ali/kylin-plugin-custom';
exports.default = function () {
return {
webpack: function modifyWebpackConfig(webpackConfig) {
webpackConfig.vue.postcss.push(
px2rem({
// Settings of this parameter and **font-size** in the template html need to be modified according to the UI interaction text of the project.
remUnit: 100
})
);
return webpackConfig;
}
}
}