Webpack-7【生成HTML、提取CSS、清除文件】

一.生成HTML

HtmlWbpackPlugin

options:

template:本地模板文件的位置

filename:输出文件的文件名称

minify:压缩代码

chunks:允许插入到模板中的一些chunk

inject:向template或者templateContent中主入所有静态资源

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exprots={
    entry:{
        app:'./src/app.js'
    },
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:"[name].[hash:5].js"
    },
    plugins:[
        new HtmlWebpackPlugin({
            filename:"index.html"
        })
    ]
}

dist文件夹中会自己生成index.html引入合适的js文件

参数

plugins:[
    new HtmlWebpackPlugin({
        template:'./index.html',
        filename:'index.html',
        chunks:['app']
    })
]

第一个参数为模板，即使不引用也会自动在模板上引入js

第三个参数是入口

设置两个入口

entry:{
    app:'./src/app.js',
    main:'./src/main.js'
}

chunks即可指定引入那个js文件，也可以多个引入

打包两个html

plugins:[
    new HtmlWebpackPlugin({
        template:'./index.html',
        filename:'index.html',
        chunks:['app']
    }),
      new HtmlWebpackPlugin({
        template:'./index.html',
        filename:'main.html',
        chunks:['main']
    }),
]

    

压缩代码

去除空格

plugins:[
    new HtmlWebpackPlugin({
        template:'./index.html',
        filename:'app.html',
        minify:{
          collapseWhitespace:true  
        },
        chunks:['app']
    })
]

去除双引号

minify:{
    removeAttributeQuotes:true
}

inject

//是否去除js模块引入
inject:false
//头部引入
inject:'head'

编译结果

图片处理

html-loader

options:

attrs:[img:src]

清除文件插件:clean-webpack-plugin

module:{
    rules:[{
        test:/\.html$/,
        use:{
            loader:'html-loader',
            options:{
                attrs:"[img:src]"
            }
        }
    },{
         test:/\.png$/,
        use:{
            loader:'file-loader',
            options:{
                attrs:"[name]-[hash:5].[ext]"
            }
        }
    }]
}

三.提取CSS

1.extract-text-webpack-plugin@next

options:{

fallback:当不提取的时候用什么方式加载到页面中

use:提取的方式处理css

}

2.mini-css-extract-plugin

npm i extract-text-webpack-plugin -D

let ExtractwebpackPlugin = require('extract-text-webpack-plugin');
new ExtractwebpackPlugin ({
    filename:"[name]-[hash:5].css"
})
rules:[{
    test:/\.css$/,
    use:ExtractwebpackPlugin.extract({
        fallback:{
            loader:'style-loader'
        },
        use:{
            loader:'css-loader'
        }
    })
}]

四.清除文件

npm i clean-webpack-plugin -D
var CleanWebpackPlugin = require('clean-webpack-plugin')
new CleanWebpackPlugin(['dist'])

这样就会清除之前所有编译后的文件