我想使用Webpack和Express設置我的第一個項目,但不知何故我做錯了什麼。webpack-dev-middleware和Express - 不能讓他們合作
這是我做過什麼:
1中創建示例工程
創建使用express-generator
的示例項目。我的文件夾結構是這樣的:
express-project
-app.js
-webpack.config.js
-public
-javascripts
-modules
-build
2.建立車把
設置handlebars
作爲視圖/模板引擎,並創建了幾個路線
3的WebPack CODE
的創建Webpack的具體代碼/配置如下
webpack.config.js
var webpack = require('webpack');
var path = require('path');
var webpackHotMiddleware = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=2000&overlay=false';
module.exports = {
resolve: {
alias: {
handlebars: path.resolve('public/vendor/handlebars-v4.0.5.js'),
bootstrap: path.resolve('public/vendor/bootstrap/js/bootstrap.js'),
pubsub: path.resolve('public/vendor/ba-tiny-pubsub.js')
}
},
context: path.resolve('public/javascripts'),
entry: {
cart: ['./modules/cart', webpackHotMiddleware],
index: ['./modules/products.js', webpackHotMiddleware],
vendor: ['bootstrap', 'pubsub', webpackHotMiddleware]
},
output: {
path: path.resolve('public/javascripts/build'),
publicPath: 'javascripts/build/',
filename: '[name].js',
chunkFilename: "[id].js"
},
module: {
loaders: [
// some loaders here
]
},
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
}
app.js
// some code before
var app = express();
(function() {
// Step 1: Create & configure a webpack compiler
var webpack = require('webpack');
var webpackConfig = require(process.env.WEBPACK_CONFIG ? process.env.WEBPACK_CONFIG : './webpack.config');
var compiler = webpack(webpackConfig);
// Step 2: Attach the dev middleware to the compiler & the server
app.use(require("webpack-dev-middleware")(compiler, {
noInfo: false,
publicPath: webpackConfig.output.publicPath,
stats: {
colors: true
}
}));
// Step 3: Attach the hot middleware to the compiler & the server
app.use(require("webpack-hot-middleware")(compiler, {
log: console.log,
path: '/__webpack_hmr',
heartbeat: 10 * 1000
}));
})();
// some code after
4. JS CODE ON TEMPLATE
然後車把頁上我所需要的捆綁的javascripts
<script src="javascripts/build/common.js"></script>
<script src="javascripts/build/vendor.js"></script>
<script src="javascripts/build/cart.js"></script>
5。 NPM START
最後,如果我使用標準啓動服務器npm start
我在shell中看到webpack捆綁了所有沒有錯誤的東西,但如果我去localhost:3000/
它找不到任何由Webpack創建的資產。相反,如果我運行webpack
來創建各種捆綁包,就像我在生產中一樣,一切都會正確創建,並且按預期工作。
希望有人能弄清楚我做錯了什麼。
感謝