对于 AngularJS 1.x 应用，使用 webpack 2 的最佳 webpack.config？

Question

我想使用 webpack 2 从头开始设置一个 Angular 1.x 应用程序。

我在为 webpack.config 找到最佳配置时遇到了麻烦，最佳 entry 和 output 用于生产（意思是，所有代码、样式和模板都经过压缩和 gzip 压缩，没有代码重复）。

我的主要问题是如何设置 webpack.config 以便它识别我的项目文件夹结构中的所有部分，如下所示：

我当前的配置文件，供参考（看不到子文件夹）：

var HtmlWebpackPlugin = require( 'html-webpack-plugin' );
var ExtractTextPlugin = require( 'extract-text-webpack-plugin' );
var path = require( 'path' );

module.exports = {
    devServer: {
        compress: true,
        contentBase: path.join( __dirname, '/dist' ),
        open: true,
        port: 9000,
        stats: 'errors-only'
    },
    entry: './src/app.js',
    output: {
        path: path.join( __dirname, '/dist' ),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [ {
            test: /\.scss$/,
            use: ExtractTextPlugin.extract( {
                fallback: 'style-loader',
                use: [
                    'css-loader',
                    'sass-loader'
                ],
                publicPath: '/dist'
            } )
        } ]
    },
    plugins: [
        new HtmlWebpackPlugin( {
            hash: true,
            minify: { collapseWhitespace: true },
            template: './src/index.html',
            title: 'Prov'
        } ),
        new ExtractTextPlugin( {
            filename: 'main.css',
            allChunks: true
        } )
    ]
};

Answer 1

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

使用 webpack，您可以采用一些方法将部分内容包含到您的 app.js。

解决方案 1
您可以 import/require 在 app.js 内的分音：

app.js

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

// set up your app as normal

这允许 app.bundle.js 将您的组件 js 文件包含在主包中。您还可以使用 html-loader 在最终包中包含模板。

这并不理想，因为它所做的只是创建一个大的 bundle.js（它不利用 http2 的多次下载，也不允许加载 components/files用户明确要求它）。

解决方案 2
将部分文件作为单独的入口文件导入到您的 webpack 包中：

webpack.config.js

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,
  ...
}

第二个解决方案是非正统的，但如果您想将所有部分拆分为 html 中的 <script> 标签（例如，如果您的 company/team 将其用作一种包括您的 directive/components/controllers) 的方法，或者如果您有 app-2.bundle.js.

解决方案 3
使用 CommonsChunkPlugin:

webpack.config.js

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

CommonsChunkPlugin 允许 webpack 遍历您的入口文件并辨别它们之间共享的公共模块。这意味着即使您在不同的文件中导入 module1，它们也只会在您的最终包中编译一次。

对于 AngularJS 1.x 应用，使用 webpack 2 的最佳 webpack.config？

Optimal webpack.config with webpack 2 for AngularJS 1.x app?

javascript

angularjs

webpack

webpack-dev-server

webpack-2