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
服务器代理

wepack到底是什么（使用篇）

webpack 是什么？

Ready？ GO

配置开发服务器