webpack-常用配置知识点

webpack配置多页面

webpcak配置多页面需要在entry中配置多个,在plugins中配置多个htmlWebpackPlugin,具体如下

entry:{
    "index":"./src/js/index.js",
    "detail:"./src/js/detail.js"
}
plugins:{
    new htmlWebpackPlugin({
        title:"index",
        template:"./src/html/index.html",
        filename:"index.html",
        chunks:['index']
    }),
     new htmlWebpackPlugin({
        title:"detail",
        template:"./src/html/detail.html",
        filename:"detail.html",
        chunks:['detail']
    })
}

webpack提取css

使用mini-css-extract-plugin插件可以提取出css,注意和loader中style-loader是互斥的,因为style-loader是整合css到style标签中,一个是整合一个是分离,二者不可同时使用

new MiniCssExtractPlugin({
    filename:'[name]-[hash].css'
})