webpack打包
✍目次总览：
标题的产生
欣赏器情况中模块化开发的标题：
- 服从标题：模块化导致JS代码须要不停的被细分, 而精致的模块分别带来了更多的JS文件, 更多的JS文件带来了更多的网络哀求, 低落了页面访问服从
- 兼容性标题：
- 欣赏器不辨认ES6（大概更高版本的JS语法）语法，大概CSS预编译处理处罚器（如less，scss）
- 现在欣赏器仅支持ES6的模块化, 那么意味着我们不能在代码中誊写commonjs规范的代码, 更意味着我们在欣赏器更加不能用commonjs导出的库和包, 我们知道, 学习了npm, yarn这类包管理工具以后, 我们不会再用很low的方式去引入库大概包, 都会用npm install的方式。
- 利用工具的兼容标题：在默认情况下, 欣赏器跟npm的结合标题非常大, 要办理这个标题, 必须利用第三方工具。
- 代码情况标题：欣赏器端, 开发情况（development）和线上情况（production）的侧重点完全差别：
- 开发情况
- 模块分别越细越好
- 最好支持多种模块化尺度
- 支持npm和其他包管理器下载的模块
- 能办理其他工程化的标题
- 线上情况（代码上线后）
- 文件数目越少越好
- 文件体积越小越好
- 代码内容越乱越好
- 全部欣赏器都要兼容
- 实行服从越高越好
标题的办理
什么是构建工具？
- 可以或许让开发者专心的誊写开发情况的代码, 然后利用这个工具将开发时态编写的代码转化为运行时态的工具。
- 常见的构建工具：webpack、grunt、gulp、browserfly等等。
- 此中webpack是现在生态最繁荣构建工具。
- 全部资源文件(js/json/css/img/less/…)都会被webpack作为模块处理处罚。
一、webpack概述
- webpack 是一个盛行的前端项目构建工具（打包工具），可以办理当前 web 开发中所面对的逆境。
- webpack 提供了友爱的模块化支持，以及代码压缩混淆、处理处罚 js 兼容标题、性能优化等强盛的功能，从而让步调员把工作的重心放到具体的功能实现上，进步了开发服从和项目的可维护性。
- 五个焦点概念：入口(Entry)、输出(Output)、Loader（加载器）、Plugins（插件）、Mode（模式）
二、webpack 的根本利用
2.1 在项目中安装和设置 webpack
① 运行 npm install webpack webpack-cli –D 下令，安装 webpack 干系的包
② 在项目根目次中，创建名为 webpack.config.js 的 webpack 设置文件
③ 在 webpack 的设置文件中，初始化如下根本设置： |
