是这样的,本小白不想使用脚手架之类的工具实践一个项目,引入了antdesign组件库。
但是看官方文件里想要实现按需加载在.babelrc中加入了以下代码
// .babelrc or babel-loader option
{
"plugins": [
["import", {
"libraryName": "antd",
"libraryDirectory": "es",
"style": "css" // `style: true` 会加载 less 文件
}]
]
}
然后就一直报错
package.json
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open "
},
"author": "",
"license": "ISC",
"dependencies": {
"antd": "^3.12.1",
"react": "^16.7.0",
"react-dom": "^16.7.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-import": "^1.11.0",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"css-loader": "^2.1.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.9.0",
"less-loader": "^4.1.0",
"mini-css-extract-plugin": "^0.5.0",
"style-loader": "^0.23.1",
"webpack": "^4.28.3",
"webpack-cli": "^3.2.0",
"webpack-dev-server": "^3.1.14"
}
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack')
module.exports = {
mode: "development",
entry: {
app: './src/index'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
publicPath: '/'
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.(js|jsx|mjs)?$/,
loader: 'babel-loader',
options: {
cacheDirectory: true
}
},
{
test: /\.(less|css)?$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'test',
filename: 'index.html',
template: './index.html',
inject: true,
hash: true
// chunks: ['app']
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash:8].css',
chunkFilename: '[name].[contenthash:8].css'
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
hot: true,
inline: true,
host: '127.0.0.1',
port: '8000',
open: true,
historyApiFallback: true,
compress: true,
stats: {
colors: true
},
}
}
求助一哈~ 或者各位老哥有没有不用脚手架使用antd的文档 我去看看 谢谢啦~