0
我有一些問題,真正理解如何配置webpack與react.js和bootstrap。Webpack與react.js和引導
這裏我的package.json:
{
"name": "gestion-fraude",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack -d --watch",
"build": "webpack -p",
"start": "node server.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-loader": "^6.2.2",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"bootstrap": "^3.3.6",
"browserify": "^13.0.0",
"canvasjs": "^1.8.1",
"express": "^4.13.4",
"mysql": "^2.10.2",
"node-jsx": "^0.13.3",
"react": "^0.14.7",
"react-dom": "^0.14.7",
"socket.io": "^1.4.5",
"socket.io-client": "^1.4.5",
"webpack": "^1.12.13"
},
"devDependencies": {
"autoprefixer-loader": "^3.2.0",
"css-loader": "^0.23.1",
"expose-loader": "^0.7.1",
"file-loader": "^0.8.5",
"less": "^2.6.0",
"less-loader": "^2.2.2",
"postcss-loader": "^0.8.0",
"react-hot-loader": "^1.3.0",
"style-loader": "^0.13.0",
"webpack-dev-server": "^1.14.1"
}
}
這裏我webpack.config.js:
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');
var config = {
entry: APP_DIR + '/index.jsx',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module : {
loaders : [
{
test : /\.jsx?/,
include : APP_DIR,
loader : 'babel'
},
{test: /\.html$/, loader: 'raw',exclude: /node_modules|bower_components/},
{test: /\.css$/, loaders: ['style-loader', 'css-loader', 'postcss-loader'], exclude: /node_modules|bower_components/},
{test: /\.less$/, loader: 'style-loader!css-loader!less-loader'},
{test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery' },
{
test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader',
},
{test: /^((?!config).)*\.js?$/, exclude: /node_modules/, loader: 'babel?cacheDirectory'},
{test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/, loader: 'file', exclude: /node_modules|bower_components/},
]
}
};
module.exports = config;
問題:
在我的本地(WINDWOS機)npm run dev
完美的作品。
然而,當我做我的Linux服務器上的同樣的事情,我有這些錯誤消息:
npm run dev
> [email protected] dev /home/ec2-user/gestion-fraude
> webpack -d --watch
Hash: 845d8e1b89804c3eab0b
Version: webpack 1.12.13
Time: 4152ms
Asset Size Chunks Chunk Names
bundle.js 1.24 MB 0 [emitted] main
bundle.js.map 1.41 MB 0 [emitted] main
+ 224 hidden modules
ERROR in ./~/css-loader!./~/less-loader!./src/client/style/style.less
Module build failed: ReferenceError: Promise is not defined
at LazyResult.async (/home/ec2-user/gestion-fraude/node_modules/postcss/lib/lazy-result.js:157:31)
at LazyResult.then (/home/ec2-user/gestion-fraude/node_modules/postcss/lib/lazy-result.js:79:21)
at processCss (/home/ec2-user/gestion-fraude/node_modules/css-loader/lib/processCss.js:198:5)
at Object.module.exports (/home/ec2-user/gestion-fraude/node_modules/css-loader/lib/loader.js:24:2)
@ ./src/client/style/style.less 4:14-128
ERROR in ./~/css-loader!./~/bootstrap/dist/css/bootstrap.css
Module build failed: ReferenceError: Promise is not defined
at LazyResult.async (/home/ec2-user/gestion-fraude/node_modules/postcss/lib/lazy-result.js:157:31)
at LazyResult.then (/home/ec2-user/gestion-fraude/node_modules/postcss/lib/lazy-result.js:79:21)
at processCss (/home/ec2-user/gestion-fraude/node_modules/css-loader/lib/processCss.js:198:5)
at Object.module.exports (/home/ec2-user/gestion-fraude/node_modules/css-loader/lib/loader.js:24:2)
@ ./~/style-loader!./~/css-loader!./~/bootstrap/dist/css/bootstrap.css 4:14-73
任何KHOW如何解決這個對我不太文件被自動編譯到一個css文件?
嘗試安裝的https:// WWW。 npmjs.com/package/promise –
根據[這篇文章](https://github.com/webpack/css-loader/issues/144),你需要'es6-promise'。 – Kujira
我已經npm安裝es6-promise但我有同樣的錯誤:/ – onedkr