如何在主体中的应用程序脚本之前将polyfill脚本和css放在头部和供应商脚本中

时间：2018-01-12 10:26:51

标签： webpack html-webpack-plugin

我有以下条目： 1. polyfill.ts 供应商 3. app.ts

我想要的是什么：

  1. 头部的polyfill脚本
  2. 正文中的供应商脚本
  3. 正文中的应用脚本 供应商脚本
  4. 应用程序脚本引用的css，，在头部。

    5. 正如你所看到的，我正在做很多手工操作。默认注入不符合我的要求。注意：我在下面的内容确实有用。

    问题是：我在下面做的是正确的方法来坚持我想要的东西吗？

    所以这些是我得到的块： enter image description here

    这是我的webpack.config.js 

     module.exports = {
        entry: {
            polyfills: './src/polyfills.ts',
            vendor: './src/vendor.ts',
            app: './src/app.ts'
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: '[name].[hash].bundle.js',
            publicPath: './dist/'
        },
        resolve: {
            extensions: ['.ts', '.js']
        },
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    loader: 'ts-loader',
                    options: {
                        transpileOnly: true
                    }
                },
                [...]
                {
                    test: /\.(scss)$/,
                    use: extractSass.extract({
                        use: [{
                            loader: "css-loader"
                        }, {
                            loader: 'postcss-loader', // Run post css actions
                            options: {
                                plugins: function () { // post css plugins, can be exported to postcss.config.js
                                    return [
                                        require('precss'),
                                        require('autoprefixer')
                                    ];
                                }
                            }
                        }, {
                            loader: "sass-loader"
                        }]
                    })
                }
            ]
        },
        plugins: [
            new CleanWebpackPlugin(['dist']),
            new HtmlWebpackPlugin({
                inject: false,
                template: 'Views/Shared/_LayoutTemplate.cshtml',
                filename: '../Views/Shared/_Layout.cshtml',
                chunks: ['polyfills', 'vendor', 'app'],
                heads: ['polyfills'],
                bodys: ['vendor', 'app']
            }),
            new ForkTsCheckerWebpackPlugin(),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor',
                chunks: ['app']
            }),
            extractSass
        ]
    };

    这是我的html模板：

    <!DOCTYPE html>

<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>@ViewBag.Title</title>

        <% for (var chunk in htmlWebpackPlugin.options.heads) { %>
        <script src="<%= htmlWebpackPlugin.files.chunks[htmlWebpackPlugin.options.heads[chunk]].entry %>"></script>
        <% } %>

        <% for (var chunk in htmlWebpackPlugin.options.bodys) { %>
            <% if (htmlWebpackPlugin.files.chunks[htmlWebpackPlugin.options.bodys[chunk]].css && htmlWebpackPlugin.files.chunks[htmlWebpackPlugin.options.bodys[chunk]].css.length !== 0) { %>
                <link href="<%= htmlWebpackPlugin.files.chunks[htmlWebpackPlugin.options.bodys[chunk]].css %>" rel="stylesheet"></link>
            <% } %>
        <% } %>
    </head>
    <body>
        @RenderBody()

        <% for (var chunk in htmlWebpackPlugin.options.bodys) { %>
        <script src="<%= htmlWebpackPlugin.files.chunks[htmlWebpackPlugin.options.bodys[chunk]].entry %>"></script>
        <% } %>
    </body>
</html>

0 个答案:

没有答案
相关问题
最新问题