乐趣区

Webpack基本功能理解以及使用

jiezi

对于前端工程化，webpack 一个神奇的工具，既然是个神奇的工具。那我们保留我们的好奇心，来聊一聊它，首先我们要搞清楚 webpack 到底是用来 解决什么问题的 ，然后我们来看看它到底是 怎么做的 ，最后来看看它的 一些基本用法，下面就来侃一侃。

什么是 webpack 以及 webpack 的作用（解决什么问题）

如今 web 前端的业务功能越来越复杂，实现方式也越来越丰富，在 web 页面开发过程中我们通常会引用很多第三方模块以及一些拓展语言（stylus，Scss，JSX…）来简化开发难度，而这些第三方模块和一些拓展语言浏览器不能直接识别，所以要通过经过打包过程生成可以让浏览器识别的格式。

就像一幢居民楼，要建起这样一座居民楼，最基本的材料是砖、瓦、钢筋、混凝土。而要组合这些材料形成一幢建筑，肯定是有一定的方法流程以及工具的，比如第一步先搭建地基，后面用塔吊不断的在地基上叠加完善就形成了一幢建筑。在这个过程中，用到的方法流程以及工具起到的作用就类似于 webpack。

进入正题，webpack 其实就是一个 JavaScript 模块集成工具，同时具有压缩文件以及优化文件结构的作用。经过 webpack 打包生成的 bundle 包，可被浏览器识别解析。

在这个过程中，会用到一些 loaders 解析工具用来预处理一些模块以及拓展语言（例如：stylus、Scss…）, 这些工具的配置使用都是在 webpack 中完成的。其中常用的 loaders 工具有：style-loader、css-loader、stylus-loader。

webpack 实现原理（怎么做的）

原理的理解可以参照上图。
webpack 的最核心的原理：1、一切皆模块 2、按需加载。

  • 一切皆模块 webpack 会将源程序按照程序结构分割成一个个独立的小模块，当需要这些小模块时，进行组合重构，避免冗余，达到重复利用。
  • 按需加载 传统的打包工具是将所有模块编译生成一个庞大的 bundle.js 文件，这样形成的打包文件体积过于庞大，而 webpack 通过异步加载可以实现按需加载，减小了打包后的体积。

webpack 的使用方法（怎么用它）

在使用 webpack 之前首先要理解四个基本概念：

1. 入口(entry)

webpack 要实现打包，首先我们得指定它的入口，指定入口后，webpack 才会找出那些模块和库是入口起点（直接和间接）的依赖。
接下来我们来看一个最简单的 entry 的配置例子。

webpack.base.config.js

module.exports = {entry: './src/main.js'};

2. 出口(output)

出口即配置打包后的输出文件路径，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

webpack.base.config.js

const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {path: path.resolve(__dirname, 'dist'),  // 输出路径
    filename: 'output.bundle.js'  // 输出文件名
  }
};

3. loader

loader 能够将非 JavaScript 文件转化为 webpack 识别的 JavaScript 文件，比如讲图片转化为 JavaScript 可调用的格式，或者将一些扩展语言文件转化为浏览器可识别的文件格式。
本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
在更高层面，在 webpack 的配置中 loader 有两个目标：

  • test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。
  • use 属性，表示进行转换时，应该使用哪个 loader。

webpack.config.js

const path = require('path');

const config = {
  output: {filename: 'my-first-webpack.bundle.js'},
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader'}
    ]
  }
};

module.exports = config;

4. 插件(plugins)

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项 (option) 自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader'}
    ]
  },
  plugins: [new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

其他一些详细用法可以参考 webpack 官方文档。

参考：webpack 中文文档

本文基于自己学习网络中的 webpack 整理的一份基本概念文档，是自己对于 webpack 使用的理解总结，如有问题，烦请评论指正，共同学习，共同进步。????????????????

退出移动版