超详细 webpack与其插件的安装配置 loader安装配置

webpack
​1.安装


@是指定版本号
-S或者--save是把安装的东西到dependencies(开发或者上线都需要用到的宝放这里)
-D或者--save-dev把安装的东西到devDependencies(开发需要用到，但是上线不需要用到放这里)
npm安装东西的时候可以打开npmjs.com，这里面会知道是用d还是s

2.  配置webpack
下面的mode有两个值为development和production，意为开发中和发布

值为development的话不会把代码压缩，打包代码的时间很快
值为production的话会把代码压缩，注释啥的也都没了，打包的时间相对慢一些
开发的时候我们更在意的是节省时间，不在意是否压缩，因为代码并不是最终版本，可能会更改，那就需要使用development
上线之后我们代码的版本已经确定了，这时候还是空间越小越好，使用production
scripts节点下的脚本可以被运行，下面的dev可以自定义，webpack不能改

3.  指定打包路径和出口


4.插件的使用
(1).代码改变的时候每次都需要npm run一下，比较麻烦，有个插件叫webpack-dev-server，可以实现代码修改自动运行打包代码，下载这个插件一样是npm install，这个用的是-D
在package.json的scripts节点下面的webpack后面加一个空格，写上serve，就表示使用这个插件，npm run dev之后就可以通过8080端口访问这个网址  (http://localhost:8080/)
需要注意的是，用这个插件打包生成的js文件在内存中不在磁盘，我们看不见，但是浏览器可以访问，在html引入这个js文件的时候要改成在根目录下这个js文件
例如:是<script  src=“/index.js”  ></script>
存在内存而不是磁盘的原因是，这个文件只要保存就会自动生成，如果一下子生成很多次磁盘受不住，而且在内存的话很容易修改保存运行
这个插件可以指定地址和插件还可以设置第一次运行这个之后自动用浏览器打开，下面的代码写在配置文件里面

(2).html-webpack-plungin安装还是上面那样安装
上面那个插件我们打开网址(http://localhost:8080/)之后并不是html页面而是一个目录，需要点击到html所在目录下才能出现页面，这个插件就可以解决这个问题
在配置文件里面输入下面的代码进行配置这个插件

这样的话就把src下面的html文件复制一份到根目录下面了，打开网址就会是html页面
之所以要把这个html页面写到src目录下而不是根目录下面的原因是写代码需要规范化，我们约定把代码写到这个目录下面，形成这样的规范化别人比较容易看得懂自己写的代码，因为在公司写代码大都是多人写一个项目
这个复制出来的文件依旧存在内存里面，我们看不到
这个插件还有一个很神奇的地方就是，如果我们写代码忘记引入内存里面的js文件，它会自动帮助我们引入

注:配置文件和package.json的文件只要修改都需要重新运行才可生效

webpack虽然用起来很轻松，但是配置很麻烦，vue-cli帮助我们配置好了webpack，直接拿来用就可

5.loader(加载器)的使用
webpack默认只能打包js文件，非js文件无法打包，loader可以协助webpack打包非js文件

(1).打包处理css文件 
(2).打包处理less文件
less文件也需要css的loader
(3)打包处理样式表中与url路径相关的文件
浏览器加载html文件的时候只是得到标签，如果有引入图片，需要再重新请求一次得到图片，如果是base64格式，在加载html文件的时候图片就一同被浏览器加载，不会再来一次请求，只是base64会让图片变大一些，所以基本只有小图片用这个，大图片不会，这里加个限制，就会智能判断是否转为base64图片
webpack打包的文件最终生成的都是就是js文件，即使是css或者其他文件，也是打包成js文件，所以在html里面不需要再次引入这些文件
(4).打包高级js文件

exclude是排除掉第三方的包，因为第三方的包不管有没有兼容性问题都不应该我们处理，不然速度会很慢的
下面这个代码是告诉babel，用下面这个插件处理代码，下面这个插件是处理装饰器的代码
其他高级代码的处理插件可以在babeljs.io这个官网上面查询到

6.打包发布
代码已经写完没有问题之后就要打包给后端了
npm run build
这样生成的js文件就会存在于物理磁盘上，而不是内存里面了

这个运行之后所有的图片、js、html等文件都会到dist文件目录下，把这个文件夹发给后端就可以
只是这样的话图片、js和html等文件都是在这个文件夹下面，看着有点乱
下面代码把js文件统一放到dist下的js文件夹下面
图片也是