[英]Webpack bundled file not generated
我刚接触webpack并做出反应,只是通过文档并创建了一个工作示例。 不幸的是我卡住了,无法继续。 问题是没有生成捆绑文件。 我创建的文件是
的package.json
{
"name": "rohith",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
}
}
webpack.config.js
module.export = {
entry : './main.js',
output : {
path : './',
filename : 'index.js'
},
devServer : {
inline : true,
port : 3333
},
module : {
loaders : [
{
test : /\.js$/,
exclude : /node_modules/,
loader : 'babel',
query : {
presets : ['es2015','react']
}
}
]
}
}
App.js
import React from 'react';
class App extends React.Component {
render(){
return <div>Hello</div>
}
}
export default App
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />,document.getElementById('app'));
的index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>Setup</title>
</head>
<body>
<div id = "app"></div>
<script src ="index.js"></script>
</body>
</html>
我得到的捆绑包有效,但没有生成index.js。 无法在localhost 3333中运行
谢谢,
我认为问题在于你没有给出绝对输出路径。
尝试这个:
var path = require('path');
module.exports = {
entry : './main.js',
output : {
path : path.join(__dirname, './'),
filename : 'index.js'
},
devServer : {
inline : true,
port : 3333
},
module : {
loaders : [
{
test : /\.js$/,
exclude : /node_modules/,
loader : 'babel',
query : {
presets : ['es2015','react']
}
}
]
}
}
希望能帮助到你 :)
在webpack.config.js中,使用module.exports
而不是module.export
。 请参阅输出文件名未配置Webpack中的错误另请注意, package.json
缺少某些依赖项。 以下是更新的package.json
:
{
"name": "rohith",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.4.1",
"react-dom": "^15.4.1",
"webpack": "^1.13.3",
"webpack-dev-server": "^1.16.2"
},
"devDependencies": {
"babel": "^6.5.2",
"babel-core": "^6.18.2",
"babel-loader": "^6.2.8",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0"
}
}
用以下内容替换脚本对象:
"scripts": {
"start": "npm run build",
"build": "webpack -p && webpack-dev-server"
},
然后,运行$ npm start
对我来说问题是在“脚本”下的package.json
这是修复:
在package.json文件中,在脚本下添加以下内容:
“脚本”:{
“开始”:“webpack-dev-server”,
“build”:“webpack -p”}
首先我运行构建然后开始。
纱线构造
如果您第一次构建,那么将创建您的bundle.js文件,之后您可以使用此命令:
纱线开始
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.