Webpack之HTML的处理与打包

HTML生成

前两篇专栏介绍Javascript编译和css编译的时候，js和css打包好后我们都是手动的将这些资源引入HTML中的，其实webpack可以自动的将其引入。

需要安装的插件

cnpm i html-webpack-plugin --S

相关配置

filename : 打包后生成的html文件的名字
template : 指定一个html文件为模板
minify ：压缩html
inject ：是否把js,css文件插入到html插入到哪
chunks ：多入口时，指定引入chunks
filename和template一定要指定

配置文件

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
        entry:{
        app:'./index.js',        
    },
    output:{        
        filename:'[name].js'//app.hkgd.js
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude:'/node_modules/',
                use:{
                    loader:'babel-loader',                                     
                }
            } ,
            {
                test:/\.tsx?$/,          
                use:'ts-loader',              
            },
            {
                // test: /\.less$/,
                test: /\.css$/,                
                use:ExtractTextPlugin.extract({              
                    fallback:{
                        loader: 'style-loader',
                        options:{                         
                            insert:'#mydiv',
                            injectType: "singletonStyleTag"
                        }
                    },
                    use:[
                        {                   
                            loader: 'css-loader',                           
                        },{
                            loader:'postcss-loader',
                            options:{
                                ident:'postcss',
                                plugins:[
                                    require('autoprefixer')({
                                        overrideBrowserslist:[
                                            '>1%'
                                        ]
                                    }),
                                    require('postcss-cssnext')()
                                ]
                            }
                        },
                        {
                            loader:'less-loader'
                        } 
                    ]
                })
            }         
        ]
    },
    plugins:[       
        new ExtractTextPlugin({
            filename:'[name].min.css'
        }),
        new HtmlWebpackPlugin({
            //必须指定filename和template
            filename:'index.html',
            template:'./index.html',
            // minify:{
            //     collapseWhitespace:true,//压缩
            // },
            // //是否将js和css自动引入
            // inject:true,
            // //多入口的时候chunks作用就出来，指定要哪一个入口生成的文件
            // chunks:[]
        })
    ]
}

自动生成的index.html

chunks
当打包是多入口文件时，chunks就会起到作用；

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
        entry:{
        app:'./index.js',    
        app2:'./app2.js'    
    },
    output:{        
        filename:'[name].js'//app.hkgd.js
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude:'/node_modules/',
                use:{
                    loader:'babel-loader',                                     
                }
            } ,
            {
                test:/\.tsx?$/,          
                use:'ts-loader',              
            },
            {
                // test: /\.less$/,
                test: /\.css$/,                
                use:ExtractTextPlugin.extract({              
                    fallback:{
                        loader: 'style-loader',
                        options:{                         
                            insert:'#mydiv',
                            injectType: "singletonStyleTag"
                        }
                    },
                    use:[
                        {                   
                            loader: 'css-loader',                           
                        },{
                            loader:'postcss-loader',
                            options:{
                                ident:'postcss',
                                plugins:[
                                    require('autoprefixer')({
                                        overrideBrowserslist:[
                                            '>1%'
                                        ]
                                    }),
                                    require('postcss-cssnext')()
                                ]
                            }
                        },
                        {
                            loader:'less-loader'
                        } 
                    ]
                })
            }         
        ]
    },
    plugins:[       
        new ExtractTextPlugin({
            filename:'[name].min.css'
        }),
        new HtmlWebpackPlugin({
            //必须指定filename和template
            filename:'index.html',
            template:'./index.html',
            // minify:{
            //     collapseWhitespace:true,//压缩
            // },
            // //是否将js和css自动引入
            // inject:true,
            // //多入口的时候chunks作用就出来，指定要哪一个入口生成的文件
            //chunks:['app']
        })
    ]
}

1、如果不指定chunks则多个入口的js文件都会被引入

2、如果在chunks中指定需要引入html中的某个入口

则生成的html中只会引入指定的文件