webpack使用

本地安装webpack，yarn add webpack webpack-cli -D

-D表示当前是开发依赖，上线的时候并不需要

webpack是0配置，打包工具，把源码打包输出后的结果（js模块）
打包，支持js的模块化

手动配置webpack，

image.png

__dirname:表示当前目录下新建一个dist文件目录，resolve：表示把相对路径解析为绝对路径，

image.png

port配置端口，执行的进度条，contentBase服务的路径，运行静态服务，compress：gzip压缩

HtmlWebpackPlugin

在使用插件之前，我们需要在dist文件下手动创建一个html并且把打包后的js文件引入其中才能在运行，该插件的作用就是帮我们自动将html引入到打包后的文件当中
HtmlWebpackPlugin，

image.png

hash戳，每次修改打包后都能产生新的文件，防止覆盖，防止出现缓存的问题

image.png
对html进行压缩操作，去除双引号，折叠成一行等操作
[hash:8],显示名称的长度，

loader

--css-loader解析@import这种歌语法
--style-loader它把css插入到head的标签中
--loader的特点，希望单一，一个loader解决一个事情
--使用多个loader，按照顺序传入数组即可。默认从右向左执行，从下到上执行
--loader也可以执行成对象。可以配置参数options

image.png
image.png
image.png

通过enforce：'pre',normal, post执行先后执行顺序，图片信息有误，enforce应该放到options里边即可

image.png
image.png
image.png
externals：外部引入并不需要打包
image.png