2020-11-24使用plugins让打包更便捷(2.4)

 使用plugins让打包更便捷
      //也就是webpack的插件，是我们的打包更加的便捷
      //npm run bundle打包完成
      //dist文件里面并没有index.html文件，
      //需要手工的往里面增加一个html页面，
      //---img插入

      //每次打包如果都这么做，就太麻烦了
      //webpack的插件就能帮我们解决这个问题
      //HtmlWebpackPlugin（官方文档）
      //npm install --save-dev html-webpack-plugin

      //怎么用webpack的插件？
      //1.引入
      //在webpack配置的对象里，有一个plugins数组，
      //把你对应的插件在这里实例化一下，

      //webpack.config.js中
      var HtmlWebpackPlugin = require('html-webpack-plugin');
      var path = require('path');

      var webpackConfig = {
        entry: 'index.js',
        output: {
          filename: 'bundle.js',
          path: path.resolve(__dirname, 'dist'),
          
        },
        plugins: [new HtmlWebpackPlugin()]
      };
      //npm run bundle打包
      //可以看到dist目录下自动帮你生成了index.html文件
      //index.html中还把打包的bundle.js引入到了html中,
      //这就是webpack对应的插件的作用，
      //--img插入

      //HtmlWebpackPlugin这个插件会在打包结束后，
      //自动生成一个html文件，
      //并把打包生成的js自动引入到这个html文件中
      

      //此时页面上什么也没有，
      //为什么？
      //打开src下的index.js
      // import './index.scss'
      //var root = documnet.getElementById('root)
      //root.innerHtml = '<div class='iconfont icon-name'>abc</div>'

      //代码的逻辑是找到id为root的DOM节点，
      //把div标签挂到root节点下，
      //问题是打包生成的index.html上没有div上id等于root的标签，
      //加上<div id='root'></div>就显示出来了

      //说明html-webpack-plugin这个插件
      //在打包生成的html里面少了<div id='root'></div>标签
      //希望自动的生成的时候里面就要这个<div id='root'></div>标签，
      //可以在webpack.config.js中做配置，
      //plugins接收一个参数template,它可以接收一个模板文件，
      //在scr文件下创建index.html模板，

      //plugins:[new HtmlWebpackPlugin({
      //   template:'src/index.html'
      // })]

      //HtmlWebpackPlugin作用是打包完后之后会生成html
      //它生成的html就是以src目录下的index.html作为模板生成的
      //所以它第一步生成了src下的index.html样的html
      //2.会把打包生成的bundle.js放入到index.html的模板中，
      //3.此时打包出的html可以直接被访问了
      //

 plugin的作用：
      plugin可以在webpack运行到某个时刻的时候，帮你做一些事情，
      很像生命周期函数，
      比如HtmlWebpackPlugin，它会在某一时刻帮你做一些事情
      什么时刻？
      就是当我们整个打包过程结束的时刻，
      它会帮我们生成一个html文件，然后把打包生成的结果
      注入到html中，

      //其它的一些插件可以在另外的一些时刻帮助webpack做另外一些事情,


      希望在重新打包的时候，能够自动的帮我们把dist目录先删除，
      然后再去执行打包
      借助clean-webpack-liugin -D

      npm install clean-webpack-plugin -D
      var CleanWebpackPlugin = require('clean-webpack-plugin');
          plugins: [new HtmlWebpackPlugin({
            template:'src/index.html'
       }),new HtmlWebpackPlugin(['dist'])]

      //表示当我在打包之前会使用CleanWebpackPlugin这个插件，
      //帮助我们去删除dist目录下的所有内容
      //至于这个插件是在打包运行前运行还是打包后执行，（查看插件文档）

      CleanWebpackPlugin是在打包之前，先会运行的，
      HtmlWebpackPlugin是在打包之后再被运行的

 打包流程：
      //--img擦插入
      1.运行npm run bundle的时候
        clean-webpack-plugin会在打包流程执行之前就先执行
        帮助你清理dits目录
      2.clean-webpack-plugin运行完之后，开始进入到打包的环节
      3.当整个打包环节都结束之后，html-webpack-plugin开始执行，
        然后会生成index.html
        在index.html中把我们生成的js放入html中

1.png 2.png 3.png