带你入门Webpack及它能干什么

  适合人群: 前端初级开发,大佬绕道。
 
  本文讲解是Webpack4.x,注意版本。
 
  在之前我们都是用传统的方式去开发一个系统,、、,就这些。开发完之后直接给后台人员去部署,当然这没什么问题。当我们的项目需求不断增加,代码也就越多,越不好维护,一个文件代码都上百甚至上千行,里面代码甚至都是重复的,还需要担心标签依赖顺序问题,还需要担心代码变量污染问题,这时就出来了模块化,防止变量污染及依赖顺序问题,而现在主流打包工具就是,强大的社区支撑且支持、、规范。
 
  是一个模块打包工具,可以将、的语法处理成浏览器可以运行的代码,把文件相关联的依赖打包成一个文件。
 
  利于我们便捷开发,帮助我们在本地搭建一个服务,代码变动热更新及不刷新页面,全局注入依赖文件,代码分割,代码提取,去除不必要的代码,区分环境变量,图片优化等,社区强大的插件扩展,帮助我们项目便捷开发。
 
  安装环境也非常的简单,一般情况下建议本地安装,全局安装可能会跟别的项目起冲突,尽量本地安装。
 
  上面安装的是语法,是命令行操作的执行命令
 
  安装完之后,不能直接这样会报错, 因为它会去全局找你的环境,但你现在是本地安装,使用这样会在你项目进行本地查找。

 
 
  在你的项目文件下执行该命令,进行对应填写(一路回车也可以),傻瓜式操作。
 
  entry打包入口文件,打包入口有好几种形式,下面我们来一一介绍它们。
 
  单入口
 
  多入口
 
  多入口打包,文件名称则是对象的key值。
 
  数组入口
 
  数组打包,接收一个数组对象,里面参数只有最后一个值才是真正的打包路径,其它参数都是将本路径文件导入到最后一个参数里面
 
  上面example中,除了最后一个参数,将其它数组参数都导入到最后一个参数文件内
 
  有入口文件就得有出口文件,
 
  有几个名称选项,我来看介绍一下
 
  [name] 使用入口文件名称[chunkhash] 生成hash值,是通过当前文件所依赖的进行解析,最后生一个chunk,在生成hash值[contenthash] 当文件内容改变值,hash值才会改变[id] 使用chunk id生成文件名[hash] 使用hash作为文件名称,每次生成的hash都不一样
 
  是什么,以上我们只说了相关的,默认只认识js文件,那么怎么打包之外的东西呢,打包之外的就会报错,这怎么办呢,这时候使用,是一个转换器,我们下面以文件为例子讲解
 
  test 接收一个正则表达式,匹配文件后缀名称,匹配成功进入该loader执行use 接收一个数组,当只有一个loader可以写成一个字符串
 
  css-loader
 
  安装
 
  使用
 
  配置完该不会报错了,但是代码还是不生效。只是解析了文件,并没有将挂载到页面上,需要结合。

 
 
  style-loader
 
  安装
 
  使用
 
  上面example中,loader必须有顺序执行,loader是从后往前执行的,先解析css文件,然后将解析完的css文件挂载到页面style标签上,这时在看代码就会生效。
 
  clean-webpack-plugin
 
  这时如果我们把output里面的filename修改之后,再次打包,可以看到之前的dist包里面的旧代码还依然存在,这时我们想每次打包都生成一个新的dist目录,这时就需要用到插件了。
 
  安装插件, 我本地安装是3.0.0的版本
 
  使用
 
  html-webpack-plugin
 
  我们打包完目录下没有,文件,那么我们可以使用该插件,在每次打包时都会生成一个文件,下面我们来安装一下
 
  安装我这里使用的是3.2.0版本,需要注意的是,你本地的版本越高,安装的插件越新,可能新版本会跟有点不兼容甚至导致代码报错。
 
  使用
 
  插件接收一个对象,这个对象有一些属性值,这里咱就不一一举例了,可以看这篇文章《html-webpack-plugin用法全解》。
 
  到这里我们的入门就讲完了,实现了一个简单的打包,默认只认识文件,要想使用及图片,可以使用进行转换。可以看到最后打包完,目录下还是一些原来的文件,直接把包给后台部署就行。

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h61638.shtml

张贴在2