webpack学习进阶（一）

首先,webpack是什么？

webpack是模块化管理工具，使用webpack能够对模块进行压缩、预处理、按需打包、按需加载等。

---

为何使用webpack?

• 对 CommonJS 、AMD 、ES6的语法作了兼容；
• 对js、css、图片等资源文件都支持打包；
• 串联式模块加载器以及插件机制，让其具备更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持；
• 有独立的配置文件webpack.config.js；
• 能够将代码切割成不一样的chunk，实现按需加载，下降了初始化时间；
• 支持 SourceUrls 和 SourceMaps，易于调试；
• 具备强大的Plugin接口，大可能是内部插件，使用起来比较灵活；
• webpack 使用异步 IO 并具备多级缓存。这使得 webpack 很快且在增量编译上更加快；
• webpack最经常使用与spa应用，主要是vue和React，其实它就很是像Browserify，可是将应用打包为多个文件。若是单页面应用有多个页面，那么用户只从下载对应页面的代码. 当他么访问到另外一个页面, 他们不须要从新下载通用的代码。

webpack也能用于服务端，可是构建后端代码通常都不会用webpack，坑太多了，因此正常状况下只用于前端

---

webpack和gulp的区别

gulp是基于流的构建工具：all in one的打包模式，输出一个js文件和一个css文件，优势是减小http请求，万金油方案。
webpack是模块化管理工具，使用webpack能够对模块进行压缩、预处理、打包、按需加载等。

---

webpack的特征？

插件化：webpack自己很是灵活，提供了丰富的插件接口。基于这些接口，webpack开发了不少插件做为内置功能。
速度快：webpack使用异步IO以及多级缓存机制。因此webpack的速度是很快的，尤为是增量更新。
丰富的Loaders：loaders用来对文件作预处理。这样webpack就能够打包任何静态文件。
高适配性：webpack同时支持AMD/CommonJs/ES6模块方案。webpack会静态解析你的代码，自动帮你管理他们的依赖关系。此外，webpack对第三方库的兼容性很好。
代码拆分：webpack能够将你的代码分片，从而实现按需打包。这种机制能够保证页面只加载须要的JS代码，减小首次请求的时间。
优化：webpack提供了不少优化机制来减小打包输出的文件大小，不只如此，它还提供了hash机制，来解决浏览器缓存问题。
开发模式友好：webpack为开发模式也提供了不少辅助功能。好比SourceMap、热更新等。
使用场景多：webpack不只适用于web应用场景，也适用于Webworkers、Node.js场景。

---

基本的使用

const path = require('path');
module.exports = {
  entry: "./app/entry", // string | object | array
  // Webpack打包的入口
  output: {  // 定义webpack如何输出的选项
    path: path.resolve(__dirname, "dist"), // string
    // 全部输出文件的目标路径
    filename: "[chunkhash].js", // string
    // 「入口(entry chunk)」文件命名模版
    publicPath: "/assets/", // string
    // 构建文件的输出目录
    /* 其它高级配置 */
  },
  module: {  // 模块相关配置
    rules: [ // 配置模块loaders，解析规则
      {
        test: /\.jsx?$/,  // RegExp | string
        include: [ // 和test同样，必须匹配选项
          path.resolve(__dirname, "app")
        ],
        exclude: [ // 必不匹配选项（优先级高于test和include）
          path.resolve(__dirname, "app/demo-files")
        ],
        loader: "babel-loader", // 模块上下文解析
        options: { // loader的可选项
          presets: ["es2015"]
        },
      },
  },
  resolve: { //  解析模块的可选项
    modules: [ // 模块的查找目录
      "node_modules",
      path.resolve(__dirname, "app")
    ],
    extensions: [".js", ".json", ".jsx", ".css"], // 用到的文件的扩展
    alias: { // 模块别名列表
      "module": "new-module"
      },
  },
  devtool: "source-map", // enum
  // 为浏览器开发者工具添加元数据加强调试
  plugins: [ // 附加插件列表
    // ...
  ],
}

以上简单配置主要有一下几点：

• Entry：指定webpack开始构建的入口模块，从该模块开始构建并计算出直接或间接依赖的模块或者库
• Output：告诉webpack如何命名输出的文件以及输出的目录
• Loaders：因为webpack只能处理javascript，因此咱们须要对一些非js文件处理成webpack可以处理的模块，好比sass文件
• Plugins：Loaders将各种型的文件处理成webpack可以处理的模块，plugins有着很强的能力。插件的范围包括，从打包优化和压缩，一直到从新定义环境中的变量。但也是最复杂的一个。好比对js文件进行压缩优化的UglifyJsPlugin插件
• Chunk：coding split的产物，咱们能够对一些代码打包成一个单独的chunk，好比某些公共模块，去重，更好的利用缓存。或者按需加载某些功能模块，优化加载时间。在webpack3及之前咱们都利用CommonsChunkPlugin将一些公共代码分割成一个chunk，实现单独加载。在webpack4 中CommonsChunkPlugin被废弃，使用SplitChunksPlugin