webpack使用3-plugin插件的使用

老规矩，介绍几个常用的插件【在某个时间点，自动执行的处理程式】，后续碰到其他的，去官网上看api使用文件即可！！

html-webpack-plugin 【详情https://www.webpackjs.com/plugins/html-webpack-plugin/】

　　这个插件是帮助webpack打包过程中生成Html文件的，如果你有多个 webpack 入口点， 他们都会在生成的HTML文件中的 script 标签内。如果你有任何CSS assets 在webpack的输出中（例如， 利用ExtractTextPlugin提取CSS）， 那么这些将被包含在HTML head中的<link>标签内。

　　

1.npm install -D html-webpack-plugin@3 //这里碰到一个问题，还是版本问题，默认不带版本扮装的是5.x.x的版本，用 webpack4打包会报错【ERROR in TypeError: Cannot read property ‘tap‘ of undefined】,uninstall 掉html-webpack-plugin@5，安装html-webpack-plugin@3就打包ok了

================================================================================================================
2.配置webpack.config.js
const path = require('path')

const VueLoaderPlugin = require('vue-loader/lib/plugin')
    //官网除了表示配置打包规则rules，还要实例化一个vueloader插件

const htmlwebpackplugin = require('html-webpack-plugin')
    //引入 html-webpack-plugin

module.exports = { //导出一个对象
    mode: 'development',
    entry: './src/main.js', //打包入口
    /*打包出口,一个对象，指定
    filename：打包后的js名
    path，打包后的路径
    */
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
            /*由于这里需要绝对路径，需要用到nodejs种的path模块
            __dirname 表示当前文件夹的绝对路径，
            这里表示在项目跟目录下新建dist文件作为打包后存放路径
            */
    }, //到这里就是webpack最基本的配置，没有用到各种处理器处理js，css，img等资源
    module: {
        rules: [{
                test: /.vue$/, // 正则表示匹配.vue结尾的文件
                loader: 'vue-loader',
            },
            {
                test: /.(jpg|jpeg|png|gif)$/,
                // loader: 'file-loader',
                loader: 'url-loader',
                options: {
                    limit: 2048, //表示小鱼2048bytes的文件使用base64直接打包到js中
                    name: '[name].[ext]' //这里可以查阅webpackjs.com 查看file-loader的配置选项
                        //这里表示使用原文件名加原扩展进行打包生产文件到指定目录下！！！
                }
            },
            {
                test: /.css$/,
                use: ['style-loader', 'css-loader'], //使用多个loader语法，use+数组，数组里面传入多个loader 的name，并且webpack使用数组里的loader，顺序是从右往左，从下往上去依次加载并使用这些loader
            },
            {
                test: /.styl(us)?$/,
                use: ['vue-style-loader', 'css-loader', 'stylus-loader'],
            },
        ]
    },
    plugins: [
        new VueLoaderPlugin(), //vue插件实例
        new htmlwebpackplugin({
            template: './index.html', //表示以当前路径下的index.html作为模板生成html文件到指定文件夹下，这里是dist文件夹
        }),
    ],
    resolve: { //表示一些解决方案
        alias: { //别名
            'vue': 'vue/dist/vue.js', //这里表示导入vue时，导入此处指定路径下的文件
        }
    }
}

=========================================================================================================================
3.执行打包命令，就会看到指定目录下不仅有打包后的js和资源类文件，还多了一个index.html【没有用插件需要手动创建】，直接访问这个index，html就可以看打包后结果是否ok

clean-webpack-plugin ：

　　当我们修改打包后的入口js的名字时，默认重新打包，目录下的原来的js文件依旧会存在，clean-webpack-plugin就是帮助去删除原来旧的文件，以保证重新打包后的目标文件夹中永远都是最新的文件

1.安装 npm install -D  clean-webpack-plugin
==============================================
2.配置webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
//最新的clean-webpack-html 导出的不只一个构造函数，这里使用结构语法只取需要用到的,并且变量名要和导出的一致 只能用 CleanWebpackPlugin这个来接收！！！

plugins: [
        new VueLoaderPlugin(), //vue插件实例
        new htmlwebpackplugin({
            template: './index.html', //表示以当前路径下的index.html作为模板生成html文件到指定文件夹下，这里是dist文件夹
        }),
        new CleanWebpackPlugin(), //plugins参数中实例化一个插件
    ],

================================================
3.执行打包命令！【流程是，开始打包之前调用这个 CleanWebpackPlugin 插件去将目标文件清空，在执行打包，最后调用 html-webpack-plugin 去生成index.html】

autoprefixer ：

　　这个插件主要功能是加上浏览器厂商前缀的。关于浏览器前缀

• Chrome(谷歌浏览器) ：WebKit内核     -webkit-
• Safari(苹果浏览器) ：WebKit内核        -webkit-
• Firefox(火狐浏览器) ：Gecko内核         -moz-
• IE(IE浏览器) ：          Trident内核        -ms-
• Opera(欧朋浏览器) ：Presto内核          -o-

       所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。

　　使用这个插件，我们编写一些css3样式的时候就不用去考虑前缀问题了，打包后会自动加上！

　

1. npm 安装 postcss-loader 和autoprefixer，有依赖关系，需要一起引入
===============================================
2.配置 一个 postcss.config.js 这里和前面讲的插件用法不同，需要多配置一步
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}
===============================================
3.配置 postcss-loader
{
                test: /.styl(us)?$/,
                use: ['vue-style-loader', 'css-loader', 'postcss-loader', 'stylus-loader'],
 }, //stylus 编写 css3，所以需要放在'stylus-loader' 后
4.webpack开始打包

 　　这里又碰到两个问题：

　　1.postcss-loader 还是版本问题，默认安装的5.x.x 的版本，打包会报错，uninstall后 指定安装 npm install -D postcss-loader@4 安装 4.x.x 版本

　　2.必须在package.josn中配置浏览器选项才能自动加上后缀！！！

package.json 里 ( 与 devDependencies 同级 ) ，设置支持哪些浏览器，必须设置支持的浏览器才会自动添加浏览器兼容

"browserslist": [
    "defaults",
    "not ie <= 8",
    "last 2 versions",
    "> 1%",
    "iOS >= 7",
    "Android >= 4.0"
  ]

————————————————