2016-03-04 25 views
1

我想使用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來創建各種捆綁包,就像我在生產中一樣,一切都會正確創建,並且按預期工作。

希望有人能弄清楚我做錯了什麼。

感謝

回答

0

我設法弄清楚是什麼原因導致的問題,在這兩條線加斜槓一切開始正常工作:

context: path.resolve('public/javascripts/'), 
path: path.resolve('public/javascripts/build/'), 
相關問題