Question

我目前正致力于帆船反应项目。我希望将webpack-dev-server与react-hot-load一起用于快速开发。为此，我添加了模块并创建了配置文件。只是使用webpack-dev-server工作正常，所以我猜webpack配置都是正确的。（如果这有助于我也可以发布配置）

现在我想使用webpack-dev-server启动grunt。我创建了此webpack.js grunt配置文件，并将webpack-dev-server:start添加到default任务中。

const path = require('path');

module.exports = function(grunt) {
  //const webpack = require('webpack');
  const webpackConfig = require('../../webpack.config');
  const webpackConfigProduction = require('../../webpack.production.config');

  grunt.config.set('webpack', {
    options: webpackConfigProduction,
    build: {}
  });

  grunt.config.set('webpack-dev-server', {
    options: {
      webpack: webpackConfig,
      host: 'localhost',
      port: 8080,
      historyApiFallback: true,
      hot: true,
      contentBase: path.join(__dirname, "../../app"),
      publicPath: '/assets/',
    },
    start: {}
  });

  grunt.loadNpmTasks('grunt-webpack');
};

grunt任务按预期启动webpack-dev-server。

我注意到的第一个区别是dev-server的控制台输出打印Project is running at http://localhost/而不是预期的Project is running at http://localhost:8080/，所以可能端口未正确初始化？

然后出现错误：在http://localhost:8080/启动浏览器会加载正确的index.html，但会发生错误。

Uncaught SyntaxError: missing ) after argument list

由这行代码引起：

if (module.hot) module.hot.accept('./components/App.jsx', () => {
    const NewApp = require('./components/App.jsx').default;
    render(NewApp);
});

因为某种方式webpack（只使用grunt，只是从命令行启动webpack-dev-server）将其转换为：

if (true) module.hot.accept("./app/components/App.jsx""./app/components/App.jsx", 
function () {
  var NewApp = __webpack_require__("./app/components/App.jsx").default;
  render(NewApp);
});

我不知道为什么＆＃34; ./ app / components / App.jsx＆＃34;使用grunt-webpack时重复。

使用grunt运行webpack-dev-server时出错

0 个答案: