1、在react中引入了antd-mobile，报如下的错误
You are using a whole package of antd, please use https://www.npmjs.com/package/babel-plugin-import to reduce app bundle size.
详细的可以参考文档：https://ant.design/docs/react
在webpack中配置antd-mobile
1）
[plain] view plain copy
npm install antd-mobile --save
2）
[plain] view plain copy
npm install babel-plugin-import --save-dev
3）
在webpack.config.js中加上
[plain] view plain copy
'plugins':[['import',{'libraryName':'antd-mobile'}]]
使用步骤
1）
[plain] view plain copy
import { Carousel, WingBlank } from 'antd-mobile';
2）
[plain] view plain copy
render() {
return <Button>Start</Button>;
}
2、在webpack中配置jQuery
1）
[plain] view plain copy
npm install jquery --save-dev
2）
[plain] view plain copy
plugins:[
new webpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery',
'window.jQuery':'jquery'
})
]
webpack.config.js
[plain] view plain copy
var path = require("path");
var baseUrl = "./";
const webpack = require('webpack');
module.exports = {
entry:baseUrl + "entry.jsx",
output:{
path: path.resolve(__dirname, ""),
filename:"bundle.js"
},
mode:'development',
module:{
rules:[
{
test: /\.jsx|.js$/,
loader: "babel-loader",
exclude: /node_modules/,
query:{
presets:['es2015', 'react','stage-0'],
'plugins':[['import',{'libraryName':'antd-mobile'}]]
}
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
loader: "style-loader!css-loader!sass-loader"
},
{
test:/\.(png|gif|jpg|jpeg|bmp)$/i,
loader:'url-loader?limit=5000'
},
]
},
plugins:[
new webpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery',
'window.jQuery':'jquery'
})
]
}
