适合人群： 前端初级开发，大佬绕道。

 

　　本文讲解是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用法全解》。

 

　　到这里我们的入门就讲完了，实现了一个简单的打包，默认只认识文件，要想使用及图片，可以使用进行转换。可以看到最后打包完，目录下还是一些原来的文件，直接把包给后台部署就行。