Webpack基本功能理解以及使用

对于前端工程化，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使用的理解总结，如有问题，烦请评论指正，共同学习，共同进步。😁😁😁😁