如何使用 Webpack 3 配置 Ant Design
Posted
技术标签:
【中文标题】如何使用 Webpack 3 配置 Ant Design【英文标题】：how to configure Ant Design with Webpack 3 【发布时间】：2018-07-27 16:07:29 【问题描述】：修复和解决方案：
感谢@BoyWithSilver，长话短说，这是我解决问题的方法：
-
在扩展部分添加了 .less
删除了 webpack.config.json 中不必要的代码，例如删除了 extract-text-webpack-plugin
将 less 从 3.0.1 降级到 2.7.0 修复错误堆：antd 中 index.less 文件中未定义的长度。
更新 3
这是我的 package.json
"name": "mobx-reactjsx",
"version": "1.0.0",
"description": dfsdfsdfsd",
"scripts":
"start": "webpack-dev-server --config webpack.config.js --progress --inline",
"lint": "eslint src"
,
"keywords": [
"react",
"reactjs",
"boilerplate",
"mobx",
"starter-kit",
"firebase",
"re-base"
],
"author": "Winston Fan",
"license": "MIT",
"homepage": "https://horizontalvision.azurewebsites.net/",
"devDependencies":
"autoprefixer": "^8.0.0",
"babel-core": "^6.9.1",
"babel-loader": "^7.1.2",
"babel-plugin-import": "^1.6.4",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-1": "^6.5.0",
"css-loader": "^0.28.9",
"extract-text-webpack-plugin": "^3.0.2",
"less": "^3.0.1",
"less-loader": "^4.0.5",
"less-vars-to-js": "^1.2.1",
"postcss-loader": "^2.1.0",
"style-loader": "^0.20.2",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
,
"dependencies":
"antd": "^3.2.1",
"firebase": "^4.9.1",
"mobx": "^3.5.1",
"mobx-react": "^4.4.1",
"mobx-react-devtools": "^4.2.15",
"re-base": "^3.2.2",
"react": "^16.2.0",
"react-dom": "^16.2.0"
更新 2：
删除上下文选项后： // 上下文：path.resolve(__dirname, 'dist'), 在webpage.config.js中
添加
javascript启用：真 在 webpack.config.json 中的 less-loader 下
我收到了这些错误。
./node_modules/antd/lib/button/style/index.less 模块构建中的错误 失败：
/* stylelint-禁用 声明-爆炸-空格-之前，无重复选择器 */ ^ 无法读取 未定义的属性“长度” 在 F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color\bezierEasing.less （第 1 行，第 -1 列）@ ./node_modules/antd/lib/button/style/index.js 5:0-23@./src/index.js@multi (webpack)-dev-server/client?http://localhost:8080./src/index.js
./node_modules/antd/lib/style/index.less 中的错误模块构建失败：
/* stylelint-禁用 声明-爆炸-空格-之前，无重复选择器 */ ^ 无法读取 未定义的属性“长度” 在 F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color\bezierEasing.less （第 1 行，第 -1 列）@ ./node_modules/antd/lib/button/style/index.js 3:0-33@./src/index.js@multi (webpack)-dev-server/client?http://localhost:8080./src/index.js
./node_modules/antd/lib/style/index.less 中的错误模块构建失败： ModuleBuildError：模块构建失败：
/* stylelint-禁用 声明-爆炸-空格-之前，无重复选择器 */ ^ 无法读取 未定义的属性“长度” 在 F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color\bezierEasing.less （第 1 行，第 -1 列） 在 runLoaders (F:\temp\Playground\mobx-reactjsx\node_modules\webpack\lib\NormalModule.js:195:19) 在 F:\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:364:11 在 F:\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:230:18 在 context.callback (F:\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:111:13) 在 在 process._tickCallback (internal/process/next_tick.js:169:7) @ ./node_modules/antd/lib/style/index.less @ ./node_modules/antd/lib/button/style/index.js @ ./src/index.js @ multi (webpack)-dev-server/client?http://localhost:8080./src/index.js
./node_modules/antd/lib/button/style/index.less 模块构建中的错误 失败：ModuleBuildError：模块构建失败：
/* stylelint-禁用 声明-爆炸-空格-之前，无重复选择器 */ ^ 无法读取 未定义的属性“长度” 在 F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color\bezierEasing.less （第 1 行，第 -1 列） 在 runLoaders (F:\temp\Playground\mobx-reactjsx\node_modules\webpack\lib\NormalModule.js:195:19) 在 F:\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:364:11 在 F:\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:230:18 在 context.callback (F:\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:111:13) 在 在 process._tickCallback (internal/process/next_tick.js:169:7) @ ./node_modules/antd/lib/button/style/index.less @ ./node_modules/antd/lib/button/style/index.js @ ./src/index.js @ 多 (webpack)-dev-server/client?http://localhost:8080./src/index.js 子提取-文本-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/less-loader/dist/cjs.js??ref--1-2!node_modules/antd/lib/style/index.less: [0] ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js?"modifyVars":"@primary-color":"#193D71","root":"F ://temp//Playground//mobx-reactjsx","javascriptEnabled":true!./node_modules/antd/lib/style/index.less 302 字节 0 [构建] [失败] [1 错误]
ERROR in ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js?"modifyVars":"@primary-color":"#193D71","root":"F://temp//Playground//mobx-reactjsx","javascriptEnabled":true!./node_modules/antd/lib/style/index.less Module build failed: /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */ ^ Cannot read property 'length' of undefined in F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color\bezierEasing.less（第 1 行，第 -1 列）子 extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/less-loader/dist/cjs.js??ref--1-2!node_modules/antd/lib/button/style/index.less： [0] ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js?"modifyVars":"@primary-color":"#193D71","root":"F ://temp//Playground//mobx-reactjsx","javascriptEnabled":true!./node_modules/antd/lib/button/style/index.less 302 字节 0 [构建] [失败] [1 错误]
ERROR in ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js?"modifyVars":"@primary-color":"#193D71","root":"F://temp//Playground//mobx-reactjsx","javascriptEnabled":true!./node_modules/antd/lib/button/style/index.less Module build failed: /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */ ^ Cannot read property 'length' of undefined in F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color\bezierEasing.less（第 1 行，第 -1 列）webpack：编译失败。
更新 1：
这是我的 webpack.config.json
var path = require('path');
var webpack = require('webpack');
const fs = require('fs');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const lessToJs = require('less-vars-to-js');
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './scripts/ant-theme-vars.less'), 'utf8'));
module.exports =
watch: true,
context: path.resolve(__dirname, './src'),
devtool: 'source-map',
entry: [
'./src/index.js'
],
output:
path: path.resolve(__dirname, './dist'),
filename: '[name].bundle.js'
,
plugins: [
new webpack.HotModuleReplacementPlugin(),
new ExtractTextPlugin('style.css')
],
resolve:
extensions: ['.js', '.jsx']
,
module:
rules: [
test: /\.jsx?$/,
use: ['babel-loader'],
include: path.join(__dirname, 'src')
,
test: /\.less$/,
use: ExtractTextPlugin.extract([
loader: "css-loader",
loader: "less-loader",
options:
modifyVars: themeVariables,
root: path.resolve(__dirname, './')
])
,
test: /\.css$/,
use: ExtractTextPlugin.extract(
use: "css-loader"
)
,]
;
现在错误信息变为：
多 (webpack)-dev-server/client 中的错误？http://localhost:8080 ./src/index.js 未找到模块：错误：无法解析“./src/index.js” 在'/Users/Winston/tmp/Playground/mobx-reactjsx/src'@multi (webpack)-dev-server/client?http://localhost:8080./src/index.js
（项目结构）
我在 projectfolder/src 下确实有 index.js
我正在尝试将 Ant Design 与 Less 支持和按需导入功能集成在一起： https://ant.design/docs/react/use-with-create-react-app 在高级指南部分。
在本节中，它使用 react-app-rewired 但我的项目使用 webpack 3（我的项目基于此 https://github.com/mobxjs/mobx-react-boilerplate），因此在我的情况下不能使用 rewired 命令。
于是又找了一篇文章： https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f
这是我的代码：
package.json
"start": "webpack-dev-server --hot --open",
webpack.config.json
const fs = require('fs');
const lessToJs = require('less-vars-to-js');
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './scripts/ant-theme-vars.less'), 'utf8'));
....
module:
.....
rules:[
.....
test: /\.less$/,
use: [
loader: "style-loader",
loader: "css-loader",
loader: "less-loader",
options:
modifyVars: themeVariables
]
]
index.js
import Button from 'antd';
<Button type="primary">Hi!</Button>
.babelrc
"presets": [
"react",
"es2015",
"stage-1"
],
"plugins": [
["import", "libraryName": "antd", "style": true ],
"transform-decorators-legacy"
]
这是来自控制台的错误消息：
【问题讨论】：
您面临的问题是什么？ @BoyWithSilverWings 忘记上传错误信息 >_ 加载器似乎没有解析.less文件。尝试将resolve: extensions: ['.js', '.jsx', '.less'], 添加到 webpack.config.js 文件中
@BoyWithSilverWings 谢谢老兄，它解决了一个，另一个出现了。
【参考方案1】：
Webpack 配置（webpack.config.js）：
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const fs = require('fs');
const lessToJs = require('less-vars-to-js');
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, 'ant-theme-vars.less'), 'utf8'));
module.exports =
watch: true,
context: path.resolve(__dirname, './src'),
entry:
app: './index.js',
,
output:
path: path.resolve(__dirname, './dist'),
filename: '[name].bundle.js',
,
devtool: 'source-map',
resolve:
alias:
moment: 'moment/src/moment'
,
,
module:
rules: [
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query:
presets: ['env','react','stage-2']
,
loader: 'babel-loader',
exclude: /node_modules/,
test: /\.js$/,
options:
presets: ['env','react','stage-2'],
plugins: [
['import', libraryName: "antd", style: true ]
]
,
,
test: /\.scss?$/,
loader: ExtractTextPlugin.extract(
fallback: 'style-loader',
loader: 'css-loader!sass-loader'
)
,
test: /\.less$/,
use: ExtractTextPlugin.extract([
loader: "css-loader",
loader: "less-loader",
options:
modifyVars: themeVariables,
root: path.resolve(__dirname, './')
])
,
test: /\.(woff|woff2|eot|ttf|otf|svg|png|jpg,pdf)$/,
loader: "file-loader"
,
test: /\.css$/,
use: ExtractTextPlugin.extract(
fallback: "style-loader",
use: "css-loader"
)
,
]
,
plugins: [
new ExtractTextPlugin('style.css')
],
devServer:
port: 9000,
contentBase: 'dist'
;
还有 package.json：
"name": "ant-design-app",
"version": "1.0.0",
"description": "Ant design",
"main": "index.js",
"scripts":
"start": "webpack-dev-server --config webpack.config.js --progress --inline",
"build": "webpack -p --config webpack.config.js"
,
"repository":
"type": "git",
"url": ""
,
"author": "Sivadass",
"license": "MIT",
"dependencies":
"antd": "^3.1.4",
"moment": "^2.20.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
,
"devDependencies":
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-import": "^1.6.3",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.9",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^0.11.2",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"less-vars-to-js": "^1.2.1",
"node-sass": "^4.7.2",
"postcss-loader": "^2.0.10",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"sugarss": "^1.0.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.1"
Ant 主题变量配置（ant-theme-vars.less）：
@primary-color: #4099ff;
@font-size-base: 16px;
@font-family : "Proxima Nova", Helvetica Neue, Helvetica, Arial, sans-serif;
@btn-font-size-lg: 15px;
@btn-padding-lg : 8px 32px;
@btn-padding-sm : 4px 16px;
【讨论】：
感谢 Sivadass，我已经更新了我的 webpack.config.json 并且出现了新的错误消息。请看我的更新1。 @Sivadass N，你能帮忙吗***.com/questions/66453633/…【参考方案2】：错误似乎来自无法解析.less 文件。将此添加到 webpack.config.js 应该有助于解决它们：
resolve:
extensions: ['.js', '.jsx', '.less']
,
您已在结构中将上下文指定为src 文件夹。这意味着必须将条目更改为 ./index.js 或只是 ./index
如果您不是有意拥有 context 密钥，则删除它也可以完成工作。
【讨论】：
谢谢大佬，解决了一个，又出现了一个。请查看我的更新 1 图片了解我的项目结构。 @Franva 您使用的less 是什么版本？
嗨，这是 ^3.0.1。我在更新 3 部分中添加了我的 package.json
@Franva 将其降到 2.7.0 并再次检查
现在就去做。我还需要降级我的less-loader吗？如果是，是什么版本？【参考方案3】：
对我来说，我只需要使用import 'antd/dist/antd.min.css
而不是import 'antd/dist/antd.css
https://github.com/ant-design/ant-design/issues/33327#issuecomment-997355323
【讨论】：
【参考方案4】：我刚刚将该 import 语句添加到我的 index.scss 文件中，然后警告消失了
@import "antd/dist/antd.css";
【讨论】：
以上是关于如何使用 Webpack 3 配置 Ant Design的主要内容，如果未能解决你的问题，请参考以下文章
Vue 开发实战实战篇 # 28：如何自定义Webpack和Babel配置
react+webpack+redux+router+ant 构架react开发环境
如何通过 vue-cli 3 配置 webpack 以使用 sass