Question

我正在使用Webpack构建前端组件。

虽然我也有一些普通的JS文件，但我有一些需要经典webpack捆绑的React组件。

后面的文件是独立的，因此不会从React文件中导入。据我了解，它们需要定义为入口点，以便Webpack读取和处理它们。到目前为止，一切都很好。

麻烦的是我希望Webpack将Babel加载进来，仅此而已，只给我返回通过Babel处理过的JS文件，我对这些文件的捆绑包不感兴趣。

有可能这样做吗？仅获得babel加载程序的结果，而不为某些入口点生成捆绑包？

也许我根本不应该对这些文件使用Webpack？或者也许我应该将这些捆绑软件设置为“库”，以便可以从HTML页面访问它们？

您觉得家伙如何？

非常感谢；）

Answer 1

取决于查找这些文件的难易程度。我有一个具有类似要求的项目。我所做的是：

1 /将香草js文件放入third_party/lib/

2 /在我当前的项目中导入/获取它们

3 /如下设置我的webpack.config.js：

module.export = {
  module: {
    rules: [{
      test : /.js$/,
      exclude : /node_modules|third_party/,
      loaders : ['babel-loader' /* other loaders? */],
    },{
      test : /third_party.*?\.js$/,
      use: [{
        loader : 'babel-loader' // or other loaders
      },{
        loader: 'file-loader'
        options: {
          name : '[path][name].[ext]',
          outputPath : 'dist/third_party'
        }
      }]
    }]
  }
}

哦，您需要npm i --save-dev file-loader

编辑：我应该澄清，这会将香草js文件作为单独的文件捆绑到您的主捆绑包中，因此您必须自己通过html标签中的脚本标签导入它们。（或者如果它们是工作文件，则由您的脚本调用）

Webpack可以“忽略”某些入口点

1 个答案: