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

1、什么是plugins

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

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

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

 

2、html-webpack-plugin

一、安装

cnpminstallhtml-webpack-plugin-D

二、做用

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

三、基本使用

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:图标

 

3、clean-webpack-plugin

一、安装

cnpminstallclean-webpack-plugin-D

二、做用

在咱们每次打包的时候会从新生成一个dist文件，相似于先将上一次的dist文件删除，而后在从新生成一个dist目录

 

三、基本使用

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

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

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

 

4、extract-text-webpack-plugin

一、安装

cnpminstall-Dextract-text-webpack-plugin@next

 

二、做用

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

 

三、基本使用

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
        }),
  ]
}

 

5、HotModuleReplacementPlugin(问题)

一、安装

cnpm install webpack -D

 

二、做用

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

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

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

三、基本使用

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

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