通过express运行webpack-dev服务器
我目前正在执行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()] };
你会想要使用webpack开发中间件 。 来自其网站的示例代码：
var webpackDevMiddleware = require("webpack-dev-middleware"); var webpack = require("webpack"); var compiler = webpack({ // configuration output: { path: '/' } }); app.use(webpackDevMiddleware(compiler, { // options }));