6.1.webpack

6.1.webpack

[TOC]

一 概述

webpack是打包/构建工具,属于工程化工具.相似的还有Grunt,Gulp

1 简介

1.3 他人评价

Evan You：

1. Webpack 是一个极其强大同时也复杂的工具，作为起步，理解它的『一切皆模块』的思想，并基本了解其常用配置选项和 loader 的概念/使用方法即可，比如如何搭配 Webpack 使用 Babel。学习 Webpack 的一个挑战在于其本身文档的混乱，建议多搜索搜索，应该还是有质量不错的第三方教程的。英文好的建议阅读 Webpack 2.0 的文档，比起 1.0 有极大的改善，但需要注意和 1.0 的不兼容之处。

3 常识

3.1 chunk

chunk直译是块的意思,在webpack里表示打包后的代码块

二 安装配置

1. npm install webpack webpack-cli --save-dev

2. 修改编译配置

   1. 增加webpack.config.js文件，配置输入输出，target为运行环境，比如node

      const path = require('path');
      
      module.exports = {
          entry: './index.js',
          output: {
              filename: 'bundle.js',
              path: path.resolve(__dirname, 'dist')
          },
          target: 'node'
      };

   2. 修改 package.json 的编译命令： "build":"webpack"

三 基础

1 模块(Modules)

webpack 通过 loader 可以支持各种语言和预处理器编写模块。loader 描述了 webpack 如何处理 非 JavaScript(non-JavaScript) 模块，并且在bundle中引入这些依赖。

总的来说，webpack 提供了可定制的、强大和丰富的 API，允许任何技术栈使用 webpack，保持了在你的开发、测试和生成流程中无侵入性(non-opinionated)。

四 基础

1 中间件

1.1 webpack-dev-middleware

1.1 webpack-hot-middleware

一般开发，每次改动后还是需要我们刷新浏览器页面才能看到结果，还是未能让人满意。这时候可以配置热更新，让浏览器自动刷新页面。热更新利用到的是名叫webpack-hot-middleware的依赖。它提供了用于express的中间件用于建立连接和传输更新；也提供了webpack的插件用于生成更新内容；同时还提供了用户端接口用于嵌入到js脚本中用于与express建立连接和应用更新。

六 问题

七 待整理

1. https://segmentfault.com/a/1190000006178770

2. https://segmentfault.com/q/1010000005857558

3. http://www.cnblogs.com/CyLee/p/5836069.html

4. webpack4-用之初体验，一起敲它十一遍:https://juejin.im/post/5adea0106fb9a07a9d6ff6de

5. gulp的pipe