最近在研究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
我的目录结构：

image.png

然后当前命令行输入：

npx webpack --mode development

执行后，dist多一个bundle.js，哇成功了，，这个就是我们的webpack打包文件

image.png

透彻一点，我们看看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
• 服务器代理