webpack中jquery和antd-mobile的配置

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）

npm install antd-mobile --save

 2）

npm install babel-plugin-import --save-dev

3）

在webpack.config.js中加上

'plugins':[['import',{'libraryName':'antd-mobile'}]]

使用步驟

 1）

import { Carousel, WingBlank } from 'antd-mobile';

 2）

render() {
   return <Button>Start</Button>;
}

2、在webpack中配置jQuery

 1）

npm install jquery --save-dev

 2）

plugins:[
    new webpack.ProvidePlugin({
	$:'jquery',
	jQuery:'jquery',
	'window.jQuery':'jquery'
    })
]

webpack.config.js

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'
    })
 ]
}