【webpack4.0】---webpack的基本使用(二)

一、什么是plugins

plugins可以使webpack在运行到某个时刻的时候，帮你做一些事情，类似于生命周期一样

plugins，它就是一个扩展器，它丰富了wepack本身，针对是loader结束后，webpack打包的整

个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点

二、html-webpack-plugin

1、安装

cnpminstallhtml-webpack-plugin-D

2、作用

会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html中，同时还可以配合配置项的chunks实现多页面开发

3、基本使用

plugins:[
   newHtmlWebpackPlugin({
       filename:"index.html",
       template:"./index.html",
       inject:"head",
       chunks:["app"],
       minify:{
           removeComments:true,
           collapseWhitespace:true   
      }
  })
]

• filename:打包后生成html的文件名称

• template:使用的模板

• inject:JS在页面的哪个部分引入

• chunks:指定引入的JS文件

• minify:压缩html文件

• removeComments:删除注释

• collapseWhitespace:删除空格

• favicon:图标

三、clean-webpack-plugin

1、安装

cnpminstallclean-webpack-plugin-D

2、作用

在我们每次打包的时候会重新生成一个dist文件，类似于先将上一次的dist文件删除，然后在重新生成一个dist目录

3、基本使用

constCleanWebpackPlugin=require("clean-webpack-plugin");

module.exports={
   plugins:[
       newCleanWebpackPlugin(["dist"])
  ]
}

参数是一个数组，值为需要删除的目录，在打包的时候会通过clean-webpack-plugin将dist目录删除

四、extract-text-webpack-plugin

1、安装

cnpminstall-Dextract-text-webpack-plugin@next

2、作用

该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱及JS文件过大等的现象

3、基本使用

constExtractTextPlugin=require("extract-text-webpack-plugin");
module.exports={
   module:{
       rules:[
      {
             test:/\.(css|scss)$/,
             use: ExtractTextPlugin.extract({
                 //编译后用什么loader来提取css文件
                   fallback: "style-loader", 
                // 指需要什么样的loader去编译文件,这里由于源文件是.css所以选择css-loader
                   use:["css-loader","sass-loader"]
          })
      },
      ]  
  },
   plugins:[
        newExtractTextPlugin("css/[name].css")
    //或者
        newExtractTextWebpackPlugin({
                 filename: '[name].[hash:8].css',
                 allChunks: true
        }),
  ]
}

五、HotModuleReplacementPlugin(问题)

1、安装

cnpm install webpack -D

2、作用

启用热模块更换，也称为HMR。

永远不要在生产环境( production )下启用 HMR

主要用来当代码产生变化后，可以在不刷新游览器的情况下对局部代码块进行替换更新。这在很多情况下都很有用，例如在处理弹出框时，使用HMR可以及时的看到变化，如果用刷新游览器的方式会回到初始页面。

3、基本使用

plugins: [
        new webpack.HotModuleReplacementPlugin(), //热更新！
 ]

飞机票：https://mp.weixin.qq.com/s?__biz=MzU3NjY4MzQ1Mw==&mid=100000155&idx=1&sn=a59ecda959ae4622658b07407123919d&scene=19#wechat_redirect