使用Webpack将ES6作为单独的文件传输

qjp7pelc 于 2022-12-23 发布在 Webpack

关注(0)|答案(2)|浏览(102)

是否可以将webpack配置为执行以下等效操作：

babel src --watch --out-dir lib

这样的目录结构看起来像这样：

- src
  - alpha
    - beta.js
    - charlie
       - delta.js
    - echo.js
    - foxtrot
      - golf
        - hotel.js

将所有文件编译到ES5，并在lib目录下以相同的结构输出它们：

- lib
  - alpha
    - beta.js
    - charlie
       - delta.js
    - echo.js
    - foxtrot
      - golf
        - hotel.js

我尝试了全局绑定所有文件路径并将它们作为单独的条目传入，但似乎webpack在定义输出文件时“忘记”了文件的位置。Output.path只提供[hash]标记，而Output.file有更多选项，但只提供[name]、[hash]和[chunk]，因此至少看起来，不支持这种编译。
为了给我的问题提供一些背景信息，我创建了一个由React组件及其相关样式组成的npm模块，我使用的是CSS模块，所以我需要一种方法来将JavaScript和CSS编译到模块的lib目录中。

webpack

来源：https://stackoverflow.com/questions/42670633/using-webpack-to-transpile-es6-as-separate-files

2条答案

按热度按时间

u3r8eeie1#

如果要输出到多个目录，可以使用路径作为条目名称。

entry: {
  'foo/f.js': __dirname + '/src/foo/f.js',
  'bar/b.js': __dirname + '/src/bar/b.js',
},
output: {
  path: path.resolve(__dirname, 'lib'),
  filename: '[name]',
},

因此，您可以使用函数为您生成满足上述条件的条目列表：

const glob = require('glob');

function getEntries(pattern) {
  const entries = {};

  glob.sync(pattern).forEach((file) => {
    entries[file.replace('src/', '')] = path.join(__dirname, file);
  });

  return entries;
}

module.exports = {
  entry: getEntries('src/**/*.js'),
  output: {
    path: path.resolve(__dirname, 'lib'),
    filename: '[name]',
  },
  // ...
}

赞(0）回复(0）举报 2022-12-23

ukqbszuj2#

看起来这个插件transpile-webpack-plugin解决了这个问题。你可以设置如下：

const TranspilePlugin = require('transpile-webpack-plugin');

module.exports = {
  entry: './src/alpha/beta.js',
  output: {
    path: __dirname + '/lib',
  },
  plugins: [new TranspilePlugin({ longestCommonDir: './src' })]
};

然后，该插件收集./src/alpha/beta.js直接或间接导入的所有文件，并在lib中单独生成输出文件，这是一种文件到文件的传输，既保留了文件名，又保留了目录结构。
顺便说一句，如果在webpack配置中指定多个命名条目和输出文件名[name]，输出将是多个捆绑包，每个捆绑包包含所有直接和间接导入，并且不能相互交互。实际上它与babel命令不一样...🙂

赞(0）回复(0）举报 2022-12-23

我来回答

使用Webpack将ES6作为单独的文件传输

2条答案

相关问题

热门标签

最新问答