目录
一、webpack的基本使用
webpack引入背景：
src中的index.js是程序员自己写的源代码，用了es6的语法， 浏览器默认将它作为js解析会出现问题。node环境不支持ES6语法，因此出现报错：
这里可以使用webpack，将高级的es6代码转化成浏览器可以识别的代码
1、安装webpack
@后面是版本号
此时打开package.json文件，发现被安装在其中
-D （--save -dev的简写）告诉npm把包放在devDependencies节点之下，只在开发阶段用到的包放在这个节点里面
补充：-S（--save的简写） 告诉npm把包放在dependencies节点之下，项目开发、上线和部署所用到的包放在这个节点里面
2、配置和使用
develpoment开发模式
production生产模式（项目上线发布）
module.exports node.js中的导出语法
scripts节点表示可运行
运行npm run dev成功以后，webpack就会生成dist/main.js文件，这里面的代码是webpack根据index.js来写的，变成浏览器可以识别的代码
在运行npm run dev的时候，会读取webpack.config.js文件中的配置，根据其中不同的配置来运行webpack
3、默认约定
把index.js改成index1.js 再去npm run dev运行，会报错
因为：
但是可以修改：
（双下划线）__dirname是项目的根目录
二、webpack中的插件
每一次程序员修改index.js中的源代码，直接看浏览器的效果是看不到的，因为webpack在每次运行的时候将index.js中的代码变成dist/main.js 浏览器是根据main.js生成的，因此每次每次修改完源代码都要重新npm run dev运行一下，生成新的main.js，浏览器才能有修改的效果
看修改效果每次都要 npm run dev运行，很麻烦，因此引入插件。
1、安装 webpack-dev-server
2、配置 webpack-dev-server
此时打开http://localhost:8080
访问src，进入到index.html，但是修改以后，还是没有效果。因为：
此时物理磁盘的dist/main.js没用了，都可以删掉了。webpack把生成的main.js放在了根目录下的内存中，访问localhost:8080是看不见的，因为不在实际磁盘中，在内存里面。
此时在页面重新引入js
这个时候，访问localhost:8080，点击src就可以看到修改的效果了
每次修改源代码，按下ctrl+s，浏览器就自动刷新了，直接能看到效果了
3、安装html-webpack-plugin插件
现在还是有问题，每次访问localhost:8080，出现的是目录，不是页面，还要点一下src，有点麻烦
如图：
4、配置安装html-webpack-plugin插件
配置完成以后，访问localhost:8080，就直接是页面了，并非目录了
此时没有在index.html引入main.js，也能看到效果
因为：
5、devServer节点
可以配置运行完成以后，自动打开浏览器
三、webpack中的loader
如果直接在index.js中导入css
运行以后会报错，要安装loader
1、打包处理css文件
最后webpack把处理好的结果，合并到main.js中，最终生成打包好的文件
2、打包处理less文件
3、打包处理样式表中与url路径相关的文件
比如：base64格式的图片
Base64 是一种基于 64 个可打印字符来表示二进制数据的表示方法。
图片的 Base64 编码就是可以将一幅图片数据编码成一串字符串，使用该字符串代替图片地址，从而不需要使用图片的 URL 地址。这样可以节省一个 http 请求，图片的 base64 编码可以算是前端优化的一环。效益虽小，但却缺能积少成多。
此时在index.js里面导入图片
会报错
需要合适的loader去处理
因为大图片转成base64有性能损失，小图片才适合转成base64，可以用图片体积定义大小图片
3、打包处理js中的高级语法
webpack只能打包处理 一部分高级的JavaScript语法。对于那些webpack无法处理的高级js语法，需要借助于babel-loader 进行打包处理。
1、安装babel-loader相关的包
2、配置babel-loader
详情请参考 Babel 的官网 https://babeljs.io/docs/en/babel-plugin-proposal-decorators
1924
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
