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

概述一、什么是plugins plugins可以使webpack在运行到某个时刻的时候，帮你做一些事情，类似于生命周期一样 plugins，它就是一个扩展器，它丰富了wepack本身，针对是loader结束后，webpack打包的整 个过程，它并不直接 *** 作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点   二、html-webpack-plugin 1、安装 cnpminstal 一、什么是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

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

3、基本使用

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

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

总结

以上是内存溢出为你收集整理的【webpack4.0】---webpack的基本使用(二)全部内容，希望文章能够帮你解决【webpack4.0】---webpack的基本使用(二)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。