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

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

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

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

这并不理想，因为它所做的只是创建一个大的 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,
  ...
}

第二个解决方案是非正统的，但如果您想将所有部分拆分为<script>，它可能会很有用。 html 中的标签(例如，如果您的公司/团队使用它作为包含指令/组件/ Controller 的手段)，或者如果您有 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 遍历您的入口文件并识别它们之间共享的公共(public)模块。这意味着即使您正在导入 module1在不同的文件中，它们只会在最终包中编译一次。