webpack学习3-常用plugin

1. html-webpack-plugin

作用：如果没有html模版，用它来创建html；或者有html的情况下，来修改html, 生产环境会自动压缩html 和js

用法：

            plugins: [
        new htmlWebpackPlugin(),
    ]

！！！注意 开放性使用file-loader 可能会导致html-webpack-plugin的崩溃， 具体表现为出现.bin、.esj、 以及标签只有head的情况

目前的解决办法是保守使用file-loader处理一些特殊的文件，用test而不是exclude

2. clean-webpack-plugin

作用：每次打包清除dist以前打包的内容，还你一个清爽，我最喜欢这个插件了

用法：

   // 注意是export 不是export default
    const {CleanWebpackPlugin} = require('clean-webpack-plugin');
    
     plugins: [
        new CleanWebpackPlugin()
    ],

3. mini-css-extract-plugin

作用：体验style-loader , 从js中提取css成为单独文件， 为生产环境使用

用法 分1，2： 注意不要写错位置

1. 现在plugin中使用

    plugins: [
        new MiniCssExtractPlugin()
    ],

2. 替换style-loader在module.rules中作用：

    {
                test: /\.less$/,
                use: [

                   // 'style-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'less-loader'
                ]
            },

4. optimize-css-assets-webpack-plugin

注意此插件 可能需要cnpm下载 cnpm i optimize-css-assets-webpack-plugin -D

作用：压缩css

用法：

     const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
     // 在plugins 中使用
      plugins: [
        new HtmlWebpackPlugin(),
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: 'css/main.css'
        }),
        new OptimizeCssAssetsWebpackPlugin(),
    ],

5. workbox-webpack-plugin

作用：pwa

用法：

// 分为两步实现
// 第一步 webpack.config.js
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
new WorkboxWebpackPlugin.GenerateSW({
/**
* 1.帮助serviceWorker 快速启动
* 2，移除旧的serviceWorker
* 3，生成一个serviceWorker文件
* */
clientsClaim: true,
skipWaiting: true
})
// 第二步  在主代码中注册
if('serviceWorker' in navigator){
// 页面加载完成后加载serviceWorker
window.addEventListener('load',()=>{
navigator.serviceWorker.register('/service-worker.js')
.then(res=>{console.log('注册serviceWorker成功')})
.catch(res=>{console.log('注册serviceWorker失败')})
})
}

6. Webpack.DllPlugin

作用：生成 mainfest.json 建立起 当前打的包和node_modules中的对应包的关系

用法：

const Webpack = require('webpack');
    // 生成 mainfest.json 建立起 当前打的包和node_modules中的对应包的关系
        new Webpack.DllPlugin({
            name: '[name]___[hash]', // 映射库里的内容 名称 和library 要一致
            path:  resolve(__dirname,'dll/manifest.json') // 输出文件的路径
        })

7. Webpack.DllReferencePlugin

作用：告诉webpack 那些不用参与打包，同时使用时 名称也需要变化一下

用法：

const Webpack = require('webpack');
   new Webpack.DllReferencePlugin({  // 告诉webpack 那些不用参与打包，同时使用时 名称也需要变化一下
            manifest:  resolve(__dirname,'dll/manifest.json')
        }),

8. AddAssetHtmlWebpackPlugin

作用： 把资源引入 并输出到html中作为cdn本地资源使用

用法：

   const AddAssetHtmlWebpackPlugin = require('add-asset-html-webpack-plugin');
   
     new AddAssetHtmlWebpackPlugin([{ // 把资源引入 并输出到html中作为cdn本地资源使用
            filepath:  resolve(__dirname,'dll/jquery.js'),
            publicPath: '',
        }])