通過express運行webpack-dev服務器

Question

我目前通過執行webpack-dev-server運行我的項目，但現在我想通過快車應用程序運行我的項目。有什麼步驟來做同樣的事情。

的package.json：

{ 
    "name": "react-redux-template", 
    "version": "1.0.0", 
    "main": "index.js", 
    "scripts": { 
    "dev": "webpack", 
    "start": "webpack-dev-server" 
    }, 
    "license": "ISC", 
    "dependencies": { 
    "babel-core": "^6.10.4", 
    "babel-loader": "^6.2.4", 
    "babel-plugin-react-html-attrs": "^2.0.0", 
    "babel-plugin-transform-class-properties": "^6.19.0", 
    "babel-plugin-transform-decorators-legacy": "^1.3.4", 
    "babel-polyfill": "^6.9.1", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "babel-preset-stage-0": "^6.16.0", 
    "babel-register": "^6.9.0", 
    "cross-env": "^1.0.8", 
    "css-loader": "^0.23.1", 
    "expect": "^1.20.1", 
    "express": "^4.14.0", 
    "node-libs-browser": "^1.0.0", 
    "node-sass": "^3.8.0", 
    "path": "^0.12.7", 
    "react": "^15.1.0", 
    "react-addons-test-utils": "^15.1.0", 
    "react-bootstrap": "^0.30.7", 
    "react-dom": "^15.1.0", 
    "react-dropzone": "^3.8.0", 
    "react-hot-loader": "^1.3.1", 
    "react-redux": "^4.4.5", 
    "react-router": "^3.0.0", 
    "redux": "^3.5.2", 
    "redux-logger": "^2.6.1", 
    "redux-promise": "^0.5.3", 
    "redux-thunk": "^2.1.0", 
    "sass-loader": "^4.0.0", 
    "style-loader": "^0.13.1", 
    "webpack": "^1.13.1", 
    "webpack-dev-middleware": "^1.6.1", 
    "webpack-dev-server": "^1.14.1", 
    "webpack-hot-middleware": "^2.11.0" 
    }, 
    "devDependencies": { 
    "babel-plugin-react-transform": "^2.0.2" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "git+https://github.com/ritishgumber/file-ui.git" 
    }, 
    "author": "", 
    "bugs": { 
    "url": "https://github.com/ritishgumber/file-ui/issues" 
    }, 
    "homepage": "https://github.com/ritishgumber/file-ui#readme" 
} 

webpack.config.js

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devServer: { 
    inline: true, 
    contentBase: './src', 
    port: 3000 
    }, 
    entry: './dev/js/index.js', 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     loaders: ['babel'], 
     exclude: /node_modules/ 
     }, { 
     test: /\.scss/, 
     loader: 'style-loader!css-loader!sass-loader' 
     }, { 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
      presets: [ 
      'react', 'es2015', 'stage-0' 
      ], 
      plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'] 
     } 
     } 
    ] 
    }, 
    output: { 
    path: 'src', 
    filename: 'js/bundle.min.js' 
    }, 
    plugins: [new webpack.optimize.OccurrenceOrderPlugin()] 
}; 

Answer 1

你要使用webpack dev middleware。來自其網站的示例代碼：