Question

我第一次学习Webpack并试图用它创建一个项目。我想运行gulp命令，以便它自动在我的浏览器上启动webpack-dev-server，打开index.html。我还想使用webpack的热重新加载来加载修改后的资产，而无需刷新浏览器。我的代码如下：

webpack.config.js

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

var config = {
  devtool: 'source-map',
  entry: [
    'webpack-dev-server/client?http://127.0.0.1:9080',
    'webpack/hot/only-dev-server',
    './src'
  ],
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
  },
  resolve: {
    modulesDirectories: ['node_modules', 'src'],
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015'],
      exclude: /node_modules/
    }]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin()
  ]  
};

module.exports = config;

gulpfile.js：

var gulp = require('gulp');
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.js');
var gutil = require('gulp-util');

gulp.task("webpack-dev-server", function(callback) {
    // Start a webpack-dev-server
    new WebpackDevServer(webpack(config), {
        hot: true,
        proxy: {
            '*': 'http://localhost:5000'
        },
        stats: {
            colors: true
        }
    }).listen(6000, "localhost", function(err) {
        if(err) throw new gutil.PluginError("webpack-dev-server", err);
    });
});

gulp.task('default', ['webpack-dev-server']);

bundle.js由webpack成功创建，但浏览器无法打开localhost:9080。当我手动打开它时，它会显示Unable to connect。此外，更改JS文件不会自动导致重建bundle.js。我已经遵循了许多教程，但无法正确使用它。有人可以帮忙吗？提前谢谢！

Answer 1

我建议不要在相当简单的场景中使用Webpack和Gulp。只需使用Webpack。与Gulp一起使用会使您的工作流程和学习体验更加复杂，如果您只是进入它的话。

尝试将其分解一下：

<强> webpack.config.js

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

var config = {
  devtool: 'source-map',
  entry: [
    './src'
  ],
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
  },
  resolve: {
    modulesDirectories: ['node_modules', 'src'],
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015'],
      exclude: /node_modules/
    }]
  }
};

module.exports = config;

然后运行Dev Server，如：

webpack-dev-server --hot --inline

无法使用webpack + gulp启动主页

1 个答案: