Webpack配置拼接JS

Question

我使用 webpack 4 来捆绑我的依赖项（在本例中为 AngularJS），如下所示：

index.js

require('angular');
require('angular-ui-router');
// ...

webpack.config.js

const path = require('path');

module.exports = {

  mode: "development",
  entry: "./build/index.js",
  output: {
      path: __dirname + '/public/js',
      filename: "bundle.js"
  }
}

这会生成一个 bundle.js 文件，其中包含我所有的依赖项。

我还想将它用作任务运行器，将 /build/js 中的 Angular JS 文件连接成一个文件（我们称之为 app.js），然后放入 /public/js

理想情况下，我希望将串联的 angular 文件（app.js 中的内容）的表示与我的依赖项一起包含在 bundle.js 中 - 尽管我不确定如果这是可能的或最佳实践。

Answer 1

正如@Pete 在评论中指出的那样，webpack 输入接受一组入口路径。 Webpack 本身不采用 glob 模式，但是你可以使用 glob 包来这样做（如果你使用 webpack，很可能你已经安装了它，否则 get it here）：

const glob = require('glob');

module.exports = {
  mode: 'development',
  entry: glob.sync('./src/**/*.js'), // ['./src/a.js', './src/dir/b.js']

  ...
}

希望对您有所帮助！

Webpack配置拼接JS

Webpack configuration to concatenate JS

javascript

angularjs

webpack

development-environment

webpack-4