2017-04-21 67 views
0

我爲webpack,dev和prod使用了兩個配置,用於我的反應應用程序。開發工作正常,但當我使用prod來啓動一個快速服務器時,它給了我一個錯誤,即沒有找到bundle.js,即使在運行build命令時,它也會在dist文件夾中生成bundle.js。在webpack生產配置上找不到Bundle.js

這裏是我的webpack.prod.js

const path = require('path'); 
const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = { 
    devtool: 'source-map', 
    entry: './app/app.js', 
    output: { 
    path: path.join(__dirname, '..', 'dist'), 
    filename: 'bundle.js', 
}, 
plugins: [ 
    new HtmlWebpackPlugin({ 
    template: 'app/index.html', 
    inject: true, 
    minify: { 
    removeComments: true, 
    collapseWhitespace: true, 
    removeRedundantAttributes: true, 
    useShortDoctype: true, 
    removeEmptyAttributes: true, 
    removeStyleLinkTypeAttributes: true, 
    keepClosingSlash: true, 
    minifyJS: true, 
    minifyCSS: true, 
    minifyURLs: true, 
    }, 
}), 
new webpack.DefinePlugin({ 
    'process.env': { 
    NODE_ENV: JSON.stringify('production'), 
    }, 
}), 
new webpack.optimize.UglifyJsPlugin({ 
    minimize: true, 
    compress: { 
    warnings: false, 
    }, 
}), 
], 
module: { 
    loaders: [ 
    { 
     test: /.jsx?$/, 
     loader: 'babel-loader', 
     include: path.join(__dirname, '..', 'app'), 
     exclude: /node_modules/, 
     query: { 
     presets: ['es2015', 'react'], 
    }, 
    }, 
    { 
    test: /\.html$/, 
    loader: 'html-loader', 
    }, 
    { 
     test: /\.scss$/, 
     loaders: ['style-loader', 'css-loader', 'sass-loader'], 
    }, 
    ], 
}, 
}; 

我的package.json文件

"scripts": { 
    "start": "cross-env NODE_ENV=production node server", 
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config ./webpack/webpack.dev.js --hot --inline", 
    "build": "rm -rf dist && webpack --config ./webpack/webpack.prod.js --progress --colors", 
    "test": "jest" 
}, 
"dependencies": { 
    "boostrap": "^1.0.0", 
    "cross-env": "^4.0.0", 
    "enzyme-to-json": "^1.5.1", 
    "express": "^4.15.2", 
    "react": "15.4.1", 
    "react-dom": "15.4.1", 
    "react-router": "3.0.0", 
    "whatwg-fetch": "^2.0.3" 
}, 
"devDependencies": { 
    "babel-cli": "^6.24.1", 
    "babel-core": "^6.24.1", 
    "babel-jest": "^19.0.0", 
    "babel-loader": "^6.4.1", 
    "babel-polyfill": "^6.23.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "babel-preset-stage-0": "^6.24.1", 
    "chai": "^3.5.0", 
    "css-loader": "^0.28.0", 
    "enzyme": "^2.8.2", 
    "eslint": "^3.19.0", 
    "eslint-config-airbnb": "^14.1.0", 
    "eslint-plugin-import": "^2.2.0", 
    "eslint-plugin-jsx-a11y": "^4.0.0", 
    "eslint-plugin-react": "^6.10.3", 
    "file-loader": "^0.11.1", 
    "html-loader": "^0.4.5", 
    "html-webpack-plugin": "^2.28.0", 
    "jest": "^19.0.2", 
    "node-sass": "^4.5.2", 
    "react-addons-test-utils": "^15.5.1", 
    "react-hot-loader": "^1.3.1", 
    "sass-loader": "^6.0.3", 
    "sinon": "^2.1.0", 
    "style-loader": "^0.16.1", 
    "webpack": "^2.4.1", 
    "webpack-dev-middleware": "^1.10.1", 
    "webpack-dev-server": "^2.4.2", 
    "webpack-hot-middleware": "^2.18.0" 
} 

正如你可以在下面的目錄結構看,DIST/bundle.js顯然是存在的,但的WebPack /快遞似乎並沒有得到它

項目目錄:

enter image description here

+1

您需要設置您的快遞後臺才能將dist文件夾作爲資產提供。 https://expressjs.com/en/starter/static-files.html –

+0

工作!謝謝。 – rizvified

回答

0

Rei Dien給出的解決方案解決了問題!

+0

你應該編輯這個答案來包含解決方案(你仍然可以讚揚Rei Dien,但答案會更好地遵循這個網站的格式)。 – brandaemon