没有 webpack 的 React 开发，有没有只使用 Gulp 的方法？答案

【问题标题】：React development without webpack, is there a way using just Gulp?没有 webpack 的 React 开发，有没有只使用 Gulp 的方法？
【发布时间】：2017-06-10 21:53:43
【问题描述】：

虽然我喜欢 Webpack 的一些东西，但我只喜欢它这么久，一旦它超过 15 行，它就会变得如此神秘、不可配置且如此耗时，以至于我宁愿不使用它除了两件事。

将 es6/jsx 转换为当前的 javascript 格式。
解决依赖关系图。

我宁愿直接在 npm 脚本或 Gulp 中进行 hotreloading、sass -> css、清理等（首选）。

然而，我才刚刚开始使用 React，我能看到 Webpack 在 React Universe 中做的唯一一件事就是将 JSX+ES6 转换为 ES5 格式。在 React 中，我还没有遇到更多需要 Webpack 的内容吗？

如果可能的话，我想根本不使用 Webpack。如果这就是它为 React 所做的一切，那么我想知道这一点：使用 Gulp 我怎么能做上面提到的两件事？

【问题讨论】：

你...搜索反应吞咽了吗？ npmjs.com/package/gulp-react 第一个结果不起作用是有原因的吗？（不知道，没用过）

标签： javascript reactjs webpack gulp

【解决方案1】：

做出此决定之前的一些考虑因素。正如您所说，您正在学习 react，因此您可能不知道在 React 环境中使用的最佳工具，但您应该在使用 gulp 之前尝试更多。

看看这个sn-p，我给你详细解释一下。

 devServer: {
    inline: true,
    port: 8080,
    host: '0.0.0.0',
    historyApiFallback: true,
  },
  entry: './src/app/App.js',
  output: {
    path: path.join(__dirname, 'static'),
    publicPath: '/',
    filename: 'bundle.[hash].js',
    chunkFilename: 'chunk.[hash].js',
  },
  module: {
    rules: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: [ ['es2015',{ modules: false }], 'react'],// insert ] 
          plugins: ['transform-object-rest-spread'],
        },
      },
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader',
        }),
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
        }),
      },
      {
        test: /.(mp4|png|jpg|woff(2)??|eot|otf|ttf|svg)(\?[a-z0-9=\.]+)?$/,
        use: 'url-loader?limit=100000',
      },
    ],
  },
  plugins: [CleanPlugin, HTMLWebpackPluginConfig, ExtractTextPluginCSS, FaviconPlugin],
  devtool: 'cheap-source-map',
};

devServer ：它是配置webpack-dev-server 的对象，这是一个在开发模式下使用的神奇工具，并通过热重载查看输出。

规则：这是 webpack 配置文件中最重要的部分，规则会根据创建的规则测试文件的扩展名并对其进行特殊处理。

在.JSX 测试中，他们将测试您的所有 .jsx 文件，即根文件夹中的调用。预设用于为 .jsx 和插件创建特殊规则，我只使用了一个启用 spread-opertor 的插件

.css 文件的规则我必须使用 2 个加载器，一个用于 css，另一个用于第一个失败（回退）。

现在你的意思是，scss 文件，我将 scss 与 css 模块一起使用，它们为每个 css 输出创建具有一些奇怪名称的块文件。使用此加载器，您可以简单地使用然后导入。CSS-MODULES 用于我为每个组件创建的每个 .scss 文件，看起来很复杂？检查网址。例如组件A.JS、组件B.JS、组件A.scss、组件B.scss

最后一条规则，是针对静态文件图片和字体的，这里不多解释。

插件行，这是必须的，您必须在配置文件中插入您使用的所有插件。最后但并非最不重要的 devtool 行带有源映射，您可以在 chrome（或其他）devTools 中检查您的缩小代码，我喜欢将此工具与调试器一起使用。

我希望它对你有所帮助，但即使你已经尝试过这个并且想要使用 gulp 和 react:https://jonsuh.com/blog/integrating-react-with-gulp/

【讨论】：