Question

虽然有些东西我喜欢Webpack，但我只喜欢它这么长时间，只要它超过15行，就会变得如此神秘，如此不可配置，而且非常耗时，我宁愿不使用它除了两件事之外别无其他。

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

我宁愿做热重载，sass - ＆gt; css，清洗等直接在npm脚本或Gulp（首选）。

然而，我刚刚开始使用React，而且我只能看到Webpack在React Universe中所做的事情正在将JSX + ES6转换为ES5格式。还有更多我尚未遇到的反应中需要Webpack。

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

Answer 1

在做出这个决定之前要考虑一些事项。就像你说的，你学习反应，所以你可能不知道在React Environment中使用的最好的工具，但是你应该在使用gulp之前尝试更多。

看看这个片段，我会向您详细解释。

 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文件使用，看起来很复杂？检查网址。例如ComponentA.JS，ComponentB.JS，ComponentA.scss，ComponentB.scss

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

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

我希望它可以帮助你找到方向，但即使你已经尝试了这个并希望使用gulp with react：https://jonsuh.com/blog/integrating-react-with-gulp/

没有webpack的反应开发，有没有办法使用Gulp？

1 个答案: