概念

怎么来理解webpack？官网说的很官方：本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。

实际上我们就可以理解将我们全部的代码打包为（1 or N）个静态资源(bundles),并最终可以让浏览器识别加载。

我们为什么需要webpack

webpack的配置文件就是entry.config.js

entry入口

定义了webpack应该使用哪个文件作为入口，webpack会依据这个地址创建依赖图。

module.exports = {
    entry: './path/to/my/entry/file.js';
}

output输出

output定义了webpack输出bundle的地址，以及bundle文件的名称。

    const path = require('path');

    module.exports = {
        entry: './path/to/my/entry/file.js',
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'my-first-webpack.bundle.js',
        },
    };

输出文件的地址默认值是.dist/main.js。其他文件会默认放置在dish文件夹。

__dirname即为当前文件夹，path是一个常用的文件路径处理包

loader

webpack本质上只能理解js和json文件，但是我们实际打包过程中会用到css、ts、wxml、axml等等各类文件，因此就需要loader的引入来以便于处理其他文件。

const path = require('path');

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

loader的属性

test: 识别打包的文件类型
use: 使用的loader名称

简单来说，就是打包的时候，webpack就会先来看一眼module的配置。看到txt文件的时候，就会知道raw-loader先来编译一下子

plugin

大家可能就有疑问，loader已经能够转换某种类型的模块了，那么plugin是用来干嘛的？

插件实际上就是为了画更大的饼（bushi），是为了能干更多的事情，比如去压缩资源、管理资源等等。。。。。（未完待续）

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

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

插件可以有很多种，不仅仅是HtmlWebpackPlugin这种官方提供的，也可以开发者自己开发载入。

模式mode

module.exports = {
  mode: 'production', // development、production、none
};

mode定义了内部的默认优化行为，那么大家可能有另外的疑问：为什么需要mode

为什么需要mode

在大型项目维护中，dev模式可能更关心打包效率，赶快编完我好调试。但是线上模式就需要尽可能追求打包的压缩比率、兼容性等温日。因此在模式上需要有区分。

引用的诸多源码都是webpack官网的内容，大家有兴趣可以自己去看

概览：webpack究竟包含了什么

概念

entry入口

output输出

loader

plugin

模式mode