前言
这篇文章是为了总结这几天复习webpack 生产环境的相关配置项，起到一个查缺补漏的作用，虽然这篇文章很基础，但是也可能有一些地方给你启发
主体部分
老生常谈的webpack四大核心概念entry output loader plugins
mode
分为 development，production和none,默认为 production 不同的参数webpack的默认配置项目也不同 最大的不同我感觉是pro模式下面代码被压缩了，哈哈哈
entry
entry 也就是入口，比如说是react框架，他的入口就是那个index.js文件
而且entry可以配置多个入口文件像这样
output
大家可能会疑惑，这么写打包后会变成什么样子呢(当初我学的时候也很疑惑)
这就接触到第二个核心概念output
这个name就对应entry对象的属性名，我们来打包看一下
每个入口引入的文件都会导出一个文件，当然这都是简单的应用。output的配置项不止这些，在我弄懂的时候我会给加上来
loaders
第三个就是loaders了
webpack只能理解js和json文件,loader为了让webpack能够去处理其他类型的文件
一般在module.rules对象中配置具体的格式可以去看官方文档，这里来举几个小例子
这块意思就是在解析图片的时候使用file-loader然后配置输出名和输出地址 也就是说你想要解析什么东西都需要加载对应的loader,具体的配置项请去npm上查看
plugins
但是有些loader也是不需要配置的这就要说明第四项plugins了
如何引入plugins
除了webpack自带的插件其他的插件都需要npm下载然后在文件上方引入的
具体配置项详见官方文档
JsConfigWebpackPlugin
比如说你要解析js 那么就可以引入
TsConfigWebpackPlugin
需要解析ts 就可以引入
AssetConfigWebpackPlugin
需要解析图片并打包成一个文件夹呢
MiniCssExtractPlugin
将CSS提取为独立的文件的插件，对每个包含css的js文件都会创建一个CSS文件
除了js需要babelrc来配置一下其他都是傻瓜式引入即可
打包可视化
还有一个神奇的东西他可以将你打包后的文件形成一个视图
生成html模板
然后继续说plugin
还有一个插件是可以生成html模板的
这个是模板文件
可以设置一些icon信息,title,引入外部cdn，和css样式操作等等
压缩css
还有压缩css文件的插件
可以设置打包后的css文件，
之前打包的那张图因为css文件全部注入到js中了，所以这个没有生效
删除打包文件
默认删除dist文件
不过我看我们公司项目，虽然设置了这个，但还是用其他删除文件的命令行把dist文件删掉了
externals
最后一个我想说的是externals这个东西
它跟四大核心是同级的
不知道你们有没有遇到过这种情况，文件打包后，吧react框架的文件都打包到里面了导致文件很大，然后决定用cdn来减少引用，发现报错react is
not defind，这是因为没有加入这个东西
属性名是引入的名字，右边是使用的名字
optimization (优化)
我是第一次接触这个东西，学习之初就知道4大核心概念
webpack4集成了optimization，减少了一些插件的引用，但是也可以配置进行一些详细的修改
配置全局变量和区分正式测试环境
还有一种情况，有没有在项目中看到一些奇怪的全局变量，但是你没有找打它在什么地方配置的那么就使用这个
可以为文件注入全局变量，主要是用这东西来配置正式环境和测试测试环境的api
说道配置不同的环境的api，可能会有疑问，我应该如何区分正式环境和测试环境呢，
这个需要下载 cross-env
在package.json中配置
一个是pro,一个是test
这样我们就可以通过process.env来获取到
然后写一个配置文件来区分引入即可最后注入全局变量中
写在最后
今天是周五，一点想学新东西的心情都没有，所以逼自己写了这篇文章想让自己进入状态，以上内容是我这几天总结出来的，本来以为已经懂了，但实际上还差的很远，这篇文章感觉有点流水账，但是我觉得知道了，就比不知道强，获取某一块对你有些启发呢，之后还会继续完善这篇文章，还有一些东西没写上去，比如说wepack-cli,mode,optimization什么的
更新
2020.8.17
修改了文档格式，加了标题，知道了如何设置目录，添加mode和optimization还有其他的plugin插件，之后还计划加入webpack-cli和开发环境的一些东西
2020.10.20
好久没有写文章了，最近也换了家新的公司，遇到了一个需求，让我快速开发一个简单的项目，很简单，但是接口发不出去，跨域什么的后台也给解决了，最后的解决方法是没有设置本地代理 具体的配置项是在webpack的devserve里面的proxy
这个/znzz就等于你要请求的地址
这样本地代理就完成了，很简单，你也可以通过
来作为全局变量使用，虽然不这么整也可以
