最近在研究webpack，关于webpack鄙人计划写三篇文章：
- wepack的使用
- wepack的优化方案
- 试读wepack的源码分析其原理
其目的就是为了写下来印象深刻，理解通透，当然方便日出自己的查看，当然鄙人能力有限，也希望各位给出宝贵的意见，欢迎抛砖~~
webpack 是什么？
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
构建就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容。
代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。
构建其实是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。 构建给前端开发注入了更大的活力，解放了我们的生产力。
Ready？ GO
mkdir webpack-start
cd webpack-start
npm init
然后继续，配置webpack (时间就是金钱，建议使用cnpm，当然土豪可以忽略~)
npm install webpack webpack-cli -D
创建src
-
创建dist
- 创建index.html
创建文件webpack.config.js
-
配置文件webpack.config.js
- entry：配置入口文件的地址
- output：配置出口文件的地址
- module：配置模块,主要用来配置不同文件的加载器
- plugins：配置插件
- devServer：配置开发服务器
webpack.config.js
let path = require('path')
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {},
plugins: []
}
在src文件夹创建 index.js 和 b.js
我的目录结构：
然后当前命令行输入：
npx webpack --mode development
执行后，dist多一个bundle.js，哇成功了，，这个就是我们的webpack打包文件
透彻一点，我们看看webpack到底做了什么？
(function(modules) {
... //此处省略
})({
"./src/b.js": (function(module, exports, __webpack_require__) {
eval("我们的代码");
/***/ })
/******/ }),
"./src/index.js": (function(module, exports, __webpack_require__) {
eval("我们的代码");
/***/ })
/******/ }),
})
可以看出，传进去的modules 就是一个对象，其中我们js路径作为key ： val是相对应的value
函数里面就是webpack做的处理，其实里面主要是声明了一个 require方法webpack_require，
1，首先判断缓存里是否已经有了，表示模块加载过了，直接返回
2，创建一个新的模块 ---并且放到缓存----执行模块函数----标记模块为加载过的 ----返回模块的导出对象
了解基本原理，来，我们开始干大事了~~
配置开发服务器
npm i webpack-dev-server –D
在webpack.config.js文件中配置一下，
contentBase: path.resolve(__dirname, 'dist'),
host: "localhost",
compress: true,
port: 6039,
值得注意的是，webpack编译后的产出文件（本案例的bundle.js）是在内存的，打包后删除文件bundle.js，还是可以访问的
后面会继续更新
- 支持加载css文件
- 自动产出html
- 编译less 和 sass
- 处理CSS3属性前缀
- 转义ES6/ES7/JSX
- 服务器代理
