Javascript AngularJS 1.x应用程序的最佳webpack.config和webpack 2？

我想使用Webpack2从头开始设置Angular 1.x应用程序

我在为

webpack.config

找到最佳配置时遇到了困难，该配置具有用于生产的最佳

条目

和

输出

（意味着，所有代码、样式和模板都已缩小，并且没有代码重复）

我的主要问题是如何设置

webpack.config

，以便它能够识别项目文件夹结构中的所有部分，如下所示：

我的当前配置文件，供参考（无法查看子文件夹）：

---

请注意，这不是一个详尽的解决方案，因为在前端可以进行许多优化，并且我将代码片段保持得相当简短

有了webpack，您可以通过一些途径将部分内容包含到

app.js

中

解决方案1
您可以在

app.js

中导入/要求您的分区，如下所示：

app.js

var angular = require('angular');
var proverbList = require('./proverb/list/proverb.list');
// require other components

// set up your app as normal

const globby = require('globby');
const sourceDir = 'src';
var webpackentry = {
    app: `${__dirname}/src/app.js`
};

const glob = globby.sync(`${__dirname}/${sourceDir}/**/*.js`)
    .map((file)=>{
    let name = file.split('/').pop().replace('.js', '');
    webpackentry[name] = file;
});


const config = {
  entry: webpackentry,
  ...
}

let webpackentry = {
  vendor: [
   'module1',
   'module2',
   'module3',
  ]
}
...
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: ['vendor'] //... add other modules
  })
]

这允许

app.bundle.js

在主捆绑包中包含组件

js

文件。您还可以使用

html加载器

将模板包含在最终捆绑包中

这并不理想，因为它所做的只是创建一个大的

bundle.js

（它不利用

http2

的多次下载，也不允许在用户明确要求时加载组件/文件）

解决方案2
将部分内容作为单独的条目文件导入到您的Web包包包中：

webpack.config.js

var angular = require('angular');
var proverbList = require('./proverb/list/proverb.list');
// require other components

// set up your app as normal

const globby = require('globby');
const sourceDir = 'src';
var webpackentry = {
    app: `${__dirname}/src/app.js`
};

const glob = globby.sync(`${__dirname}/${sourceDir}/**/*.js`)
    .map((file)=>{
    let name = file.split('/').pop().replace('.js', '');
    webpackentry[name] = file;
});


const config = {
  entry: webpackentry,
  ...
}

let webpackentry = {
  vendor: [
   'module1',
   'module2',
   'module3',
  ]
}
...
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: ['vendor'] //... add other modules
  })
]

第二种解决方案是非正统的，但如果您希望将所有部分拆分为html中的

标记（例如，如果您的公司/团队使用该标记作为包含指令/组件/控制器的手段），或者如果您有一个

app-2.bundle.js

，则该解决方案非常有用

解决方案3
使用

commonchunkplugin

：

webpack.config.js

var angular = require('angular');
var proverbList = require('./proverb/list/proverb.list');
// require other components

// set up your app as normal

const globby = require('globby');
const sourceDir = 'src';
var webpackentry = {
    app: `${__dirname}/src/app.js`
};

const glob = globby.sync(`${__dirname}/${sourceDir}/**/*.js`)
    .map((file)=>{
    let name = file.split('/').pop().replace('.js', '');
    webpackentry[name] = file;
});


const config = {
  entry: webpackentry,
  ...
}

let webpackentry = {
  vendor: [
   'module1',
   'module2',
   'module3',
  ]
}
...
plugins: [
  new webpack.optimize.CommonsChunkPlugin({
    name: ['vendor'] //... add other modules
  })
]

---

允许webpack在您的输入文件中涂鸦，并识别它们之间共享的通用模块。这意味着，即使您在不同的文件中导入

module1

，它们也只会在最后一个捆绑包中编译一次。

那么您有

app.js

您想将您的部分导入app.js还是将

谚语列表.js

编译为单独的指令/控制器？如果我理解您的问题正确的话（即通过webpack编译部分内容）您有两个选择，1.推送部分内容（通过glob或每个文件）输入条目，或2.将它们导入app.js和commonChuck。-是的，我认为您理解正确，选项2是否意味着我应该使用require将所有js文件导入

app.js

，并将所有

html

模板导入指令本身？您可以这样做是的-您需要

html加载器

用于tem如果要将指令拆分为单独的捆绑包（而不是

app.bundle.js

）您可以使用

CommonChunksPlugin

或将这些文件附加到您的

条目中

我很难理解哪个

webpack.config

设置是最佳路径，以及在开发过程中我必须注意哪些实践来保证代码在生产中正常工作（即，我是否需要

app.js

或单独的

index.js

文件中的所有内容？我是否需要基于每个组件的模板和样式？我不确定我是否理解

清单

文件中应该包含的内容，即使在阅读了官方文档后，其中指出：“我们需要将运行时提取到一个单独的清单文件中"。该文件中到底有什么内容，它与常规的

entry.js

或

app.js

有何不同？引用survive.js

当webpack写入捆绑包时，它也会维护一个清单。清单描述了webpack应该加载的文件。可以提取它并更快地开始加载项目的文件必须等待供应商捆绑包加载。

btw-@Tiago这对您有用吗？-（如果答案令人满意，请确认答案）仍在解决中，我会尽快确认。@Tiago这方面运气好吗？