webpack 是什么？

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

构建就是把源代码转换成发布到线上的可执行 JavaScrip、CSS、HTML 代码，包括如下内容。

代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。构建其实是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。构建给前端开发注入了更大的活力，解放了我们的生产力。

Ready？ GO

mkdir webpack-startcd webpack-startnpm 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

服务器代理