首页 > Web开发 > 详细

html-webpack-plugin插件 根据模板生成多页面

时间:2017-09-13 12:35:41      阅读:423      评论:0      收藏:0      [点我收藏+]

1、项目目录结构为:

技术分享

 

2、webpack.config.js配置文件为:

 

var htmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports = {
    //打包入口
    entry: {
        main: ‘./src/js/main.js‘,
        a: ‘./src/js/a.js‘,
        b: ‘./src/js/b.js‘,
        c: ‘./src/js/c.js‘
    },
    //打包后的文件
    output: {
        //不加__dirname 会报错
        path: __dirname + ‘/dist‘,
        //注意:使用[name]确保每个文件名都不重复
        filename: ‘js/[name]-[chunkhash].js‘,
        //线上地址配置
        publicPath:‘http://cdn.com/‘
    },
    plugins: [
        new htmlWebpackPlugin({
            template: ‘index.html‘,
            filename: ‘a.html‘,
            title: ‘this is a.html‘,
            //增加指定的chunks
            chunks:[‘main‘,‘a‘]
        }),
        new htmlWebpackPlugin({
            template: ‘index.html‘,
            filename: ‘b.html‘,
            title: ‘this is b.html‘,
            //增加指定的chunks
            chunks:[‘main‘,‘b‘]
        }),
        new htmlWebpackPlugin({
            template: ‘index.html‘,
            filename: ‘c.html‘,
            title: ‘this is c.html‘,
            //增加指定的chunks
            chunks:[‘main‘,‘c‘]
        })
    ]
}

3、执行命令:

npm run webpack

4.编译:

技术分享

技术分享

 

html-webpack-plugin插件 根据模板生成多页面

原文:http://www.cnblogs.com/mengfangui/p/7514270.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!