叉烧店并不卖叉烧

webpack打包多个入口起点(使用html-webpack-plugin)

webpack TTT 154℃ 0评论

参考 参考2

webpack打包多个入口起点(使用html-webpack-plugin)

使用html-webpack-plugin插件的chunks属性将html模板与各个js入口关联

项目使用之前的教程内容

1.添加两个html模板

index.html

<div id="root"></div>

child-index.html

<div id="childIndex"></div>

2.修改webpack.config.js文件如下

const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
 
module.exports = {
    entry: {
        index: __dirname + "/app/index.js",
        childIndex: __dirname + "/app/child-index.js"
    },
    output: {
        path: __dirname + "/public",
        filename: "[name].js"  // 将以原本的的入口文件名称命名
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'templates/index.html',
            chunks: ['index']
        }),
        new HtmlWebpackPlugin({
            filename: 'child-index.html',
            template: 'templates/child-index.html',
            chunks: ['childIndex']
        })
    ]
}

完善

const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
 
module.exports = {
    entry: {
        index: __dirname + "/app/index.js",
        childIndex: __dirname + "/app/child-index.js"
    },
    output: {
        path: __dirname + "/public",
        filename: "[name].js"  // 将以原本的的入口文件名称命名
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: 'templates/index.html',
            chunks: ['index'], // 指定这个模板关联哪些js入口
            hash: true, // 使用不修改js入口文件名的方式增加了hash值,允许缓存
            minify: { // 使文件最小化
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }
        }),
        new HtmlWebpackPlugin({
            filename: 'child-index.html',
            template: 'templates/child-index.html',
            chunks: ['childIndex'],
            hash: true, // 使用不修改js入口文件名的方式增加了hash值,允许缓存
            minify: { // 使文件最小化
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true,
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }
        })
    ]
}

转载请注明:叉烧店 » webpack打包多个入口起点(使用html-webpack-plugin)

喜欢 (0)
发表我的评论
取消评论

CAPTCHA Image
Reload Image
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址