我如何订购从 webpack-dev-server 创建的临时静态资产 index.html？

Question

我一直在关注 Angular 2 关于 webpack 的文档。我正在尝试使用 webpack-dev-server 来帮助测试我的应用程序。入口点包括 polyfills、vendor 和 app。

当我尝试运行开发服务器时，文件被排序为 polyfills、app 和 app。

当它们在 index.html 模板中呈现时，是否有明确排序的方法？

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var helpers = require('./helpers');

module.exports = {
    cache: false,
    debug: true,

    entry: {
        'polyfills': './src/polyfills.ts',
        'vendor': './src/vendor.ts',
        'vip-app': './src/main.ts'
    },

    resolve: {
        extensions: ['', '.js', '.ts'],
    },

    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ['ts', 'angular2-template-loader']
            },
            {
                test: /\.html$/,
                loader: 'html'
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
                loader: 'file?name=assets/[name].[hash].[ext]'
            },
            {
                test: /\.css$/,
                loaders: [ExtractTextPlugin.extract('style', 'css-loader'), 'to-string', 'css']
            }
        ]
    },

    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: ['vendor', 'polyfills']
        }),

        new HtmlWebpackPlugin({
            template: 'index.html'
        })
    ]
};

<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <title>Angular With Webpack</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://localhost:8080/vip-app.css" rel="stylesheet"></head>
<body>
    <vip-app-base-local-dev>Loading...</vip-app-base-local-dev>
    <script type="text/javascript" src="http://localhost:8080/polyfills.js"></script>
    <script type="text/javascript" src="http://localhost:8080/vip-app.js"></script>
    <script type="text/javascript" src="http://localhost:8080/vendor.js"></script></body>
</html>

Answer 1

您可以使用 HtmlWebpackPlugin 中的 chunkSortMode 选项来实现它。

https://github.com/ampedandwired/html-webpack-plugin#configuration

chunksSortMode: Allows to control how chunks should be sorted before they are included to the html. Allowed values: 'none' | 'auto' | 'dependency' | {function} - default: 'auto'

例如

1) 这个选项

chunksSortMode: 'none'

将按字母顺序对您的块进行排序

2) 选项

chunksSortMode: 'dependency'

将根据块之间的依赖关系对块进行排序。

3) 您也可以编写自定义函数，例如：

function sortChunk(packages) {
  return function sort(a, b) {
     if (packages.indexOf(a.names[0]) > packages.indexOf(b.names[0])) {
        return 1;
      }
      if (packages.indexOf(a.names[0]) < packages.indexOf(b.names[0])) {
        return -1;
      }
      return 0;
  }
}

并像

一样使用它

new HtmlWebpackPlugin({
   template: 'index.html',
   chunksSortMode: sortChunk(['vip-app', 'vendor', 'polyfills' ])
})

达到想要的顺序

vip-app' => 'vendor' ==> 'polyfills'

Answer 2

chunksSortMode 只匹配入口点而不匹配块

我如何订购从 webpack-dev-server 创建的临时静态资产 index.html？

How do I order static assets created from webpack-dev-server for temporary index.html?

webpack

webpack-dev-server