wepack究竟是什么（使用篇）

最近在研究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
• 服务器代理