当前位置 : 主页 > 网页制作 > html >

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

来源:互联网 收集:自由互联 发布时间:2021-06-12
一、什么是plugins plugins可以使webpack在运行到某个时刻的时候,帮你做一些事情,类似于生命周期一样 plugins,它就是一个扩展器,它丰富了wepack本身,针对是loader结束后,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

上一篇:web零散图片
下一篇:Action 的实现方式
网友评论