适用于AngularJS 1.x应用的webpack 2的最佳webpack.config？

Question

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

我无法找到webpack.config的最佳配置，生产的最佳entry和output（意思是所有代码，样式和模板缩小和gziped，没有重复代码）

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

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

使用网络包，您可以采取一些路线将部分内容纳入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>标记（例如，如果您的公司/团队使用它作为包含您的指令/组件的方法），它会很有用/ 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，它们也只会在最终的包中编译一次。