Webpack核心(二）—— plugins

plugins插件

搜索引擎或者github搜索下

• HtmlWebpackPlugin
• 安装： npm install html-webpack-plugin -D
• 引入：const HtmlWebpackPlugin = require("html-webpack-plugin");
• 参数：

title:页面标题

template:页面模板

filename:页面名字

inject: script标签的位置

chunks: 页面里要引入的js文件

minify:压缩内容

 

https://www.webpackjs.com/plugins/html-webpack-plugin/ ：官网

https://github.com/jantimon/html-webpack-plugin :github

 

<!-- 用了模板语法后，title需要在这里用模板语法写出来。否则不生效 -->
<%= HtmlWebpackPlugin.options.title %>

plugins:[
        new HtmlWebpackPlugin({
            title: "chenyunping",
            template:'./src/template.html', //模板地址
            filename:'chenyunping.html',
            inject:true, //值为true或者body的时候，script标签放在body的底部） 2.值为head的时候，script标签放在head里  
            hash:true,  //决定页面引入的js后面是否加hash值，清理页面缓存
            //chunks:['one'], //决定页面里引入那个js文件，否则全部引入
            minify:{
                //关于页面压缩，借助了另外一个插件
                collapseWhitespace:true, //去除空格
                removeComments:true, //去掉页面里的注释
                removeAttributeQuotes:true //去除引号
            }
        }),
        //生成两个
        // entry:{ （多入口）
        //     one:'./src/1.js',
        //     two:'./src/2.js'
        // },

        // new HtmlWebpackPlugin({
        //     title: "two",
        //     template:'./src/template.html', //模板地址
        //     filename:'two.html',
        //     inject:true, //值为true或者body的时候，script标签放在body的底部） 2.值为head的时候，script标签放在head里  
        //     hash:true,  //决定页面引入的js后面是否加hash值，清理页面缓存
        //     //chunks:['two'], //决定页面里引入那个js文件，否则全部引入
        //     minify:{
        //         //关于页面压缩，借助了另外一个插件
        //         collapseWhitespace:true, //去除空格
        //         removeComments:true, //去掉页面里的注释
        //         removeAttributeQuotes:true //去除引号
        //     }
        // }),
    ]