如何使用Webpack 3
修复和解决方案：
感谢@BoyWithSilver，长话短说，这就是我为解决问题所采取的措施：
- 将.less添加到扩展部分
- 删除了webpack.config.json中不必要的代码，例如删除了extract-text-webpack-plugin
- 从3.0.1降级到2.7.0固定的大量错误：antd中index.less文件中未定义的长度。
-
删除上下文选项后： // context：path.resolve（__ dirname，＆＃39; dist＆＃39;）， 在webpage.config.js
-
加入
javascriptEnabled：true 在webpack.config.json
中的less-loader下
更新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：
我收到了这些错误。
错误在./node_modules/antd/lib/button/style/index.less模块构建 失败：/ * stylelint-disable 声明-bang-space-before，no-duplicate-selectors * / ^无法读取 物业长度＆＃39;未定义的 在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-disable 声明-bang-space-before，no-duplicate-selectors * / ^无法读取 物业长度＆＃39;未定义的 在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-disable 声明-bang-space-before，no-duplicate-selectors * / ^无法读取 物业长度＆＃39;未定义的 在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） 在 at 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-disable 声明-bang-space-before，no-duplicate-selectors * / ^无法读取 物业长度＆＃39;未定义的 在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） 在 at 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 @ multi（webpack）-dev-server / client？http://localhost:8080 ./src/index.js Child extract-text-webpack-plugin node_modules /提取文本-的WebPack-插件/ DIST ！node_modules / CSS-装载机/ index.js node_modules /更少的装载机/距离/ cjs.js ??裁判 - 1-2 node_modules / antd / lib中/风格/ index.less！ [0] ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js?{"modifyVars":{"@primary-color":&# 34;＃193D71＆＃34;}＆＃34;根＆＃34;：＆＃34; F：//温度//游乐场// mobx-reactjsx＆＃34;＆＃34; javascriptEnabled＆＃34;：真} ！./ node_modules / antd / lib中/风格/ 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列）Child extract-text-webpack-plugin node_modules /提取文本-的WebPack-插件/ DIST ！node_modules / CSS-装载机/ index.js node_modules /更少的装载机/距离/ cjs.js ??裁判 - 1-2 node_modules / antd / lib目录/按键/风格/ index.less！ [0] ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js?{"modifyVars":{"@primary-color":&# 34;＃193D71＆＃34;}＆＃34;根＆＃34;：＆＃34; F：//温度//游乐场// mobx-reactjsx＆＃34;＆＃34; javascriptEnabled＆＃34;：真} ！./ node_modules / antd / lib目录/按键/风格/ 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找不到模块：错误：无法解析＆＃39; ./ src / index.js＆＃39; in＆＃39; / Users / Winston / tmp / Playground / mobx-reactjsx / src＆＃39; @多 （webpack）-dev-server / client？http://localhost:8080 ./src/index.js
（项目结构）
我在projectfolder / src下有index.js
我尝试将Ant Design与Less support和Import on Demand功能集成在一起，该功能位于： https://ant.design/docs/react/use-with-create-react-app 在高级指南部分。
在本节中，它使用react-app-rewired但我的项目使用webpack 3（我的项目基于此https://github.com/mobxjs/mobx-react-boilerplate），因此在我的情况下不能使用重新连接的命令。
所以我发现了另一篇文章： 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"
]
}
以下是来自控制台的错误消息：
2 个答案:
答案 0 :(得分：1)
错误似乎来自无法解析.less个文件。将其添加到webpack.config.js应该有助于解决这些问题：
resolve: {
extensions: ['.js', '.jsx', '.less']
},
您已在结构中将上下文指定为src文件夹。这意味着必须将条目更改为./index.js或仅./index
如果您不想拥有context密钥，则删除它也可以完成工作。
答案 1 :(得分：0)
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;
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？