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

Question

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

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

我的主要问题是如何设置 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

请注意，这不是一个详尽的解决方案，因为可以在前端进行许多优化，而且我的代码 sn-ps 相当短。

使用 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

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

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

解决方案 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> 标记（例如，如果您的公司/团队使用它作为包含指令/组件/控制器的一种方式） )，或者如果您有 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，它们也只会在您的最终包中编译一次。