[英]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.