阅读数:126 评论数:0

一、概述

Webpack 可以帮助我们完成一些任务。比如 js 压缩、css 压缩、编译模板文件等等，从而减少前端的工作量。当然，Webpack 功能很强大，能帮我们完成的工作远远不止这些。如果我们使用 umi 可以极大的简化 webpack 的配置，但是仍然推荐了解一下基础知识，方便 debug 和 自定义一些配置。

https://webpack.docschina.org/concepts/

二、核心概念

1、入口（entry）

指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack会找出有哪些模块和库是入口起点（直接或间接）依赖的。

默认值是./src/index.js，但是你可以通过配置entry属性，来指定个或或多个入口起点。

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

2、输出（output）

告诉webpack在哪里输出它所创建的bundle，以及如何命名这些文件。主要输出文件的默认值是./dist/main.js，其他生成文件默认放置在./dist文件夹中。

可以通过配置中指一个output字段，来配置这些。

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',
  },
};

3、loader

webpack只能理解Javascript和JSON文件，这是webpack开箱可用的自带能力。loader让webpack能够处理其他类型的文件，并将它们转换为有效模块，以供应用程序使用，以及被添加到依赖图中。

在更高层面，在webpack的配置中，loader有两个属性：

（1）test

识别出哪些文件会被转换。

（2）use

定义在进行转换时，应该使用哪个loader。

const path = require('path');

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

表示在遇到require或import语句中被解析为".txt"的路径时，在打包之前，先使用raw-loader转换一下。

4、插件（plugin）

插件可以范围更广的任务，包括：打包优化、资源管理、注入环境变量。

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

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' })],
};

上面的示例中，html-webpack-plugin为应用程序生成一个html文件，并自动将生成的所有bundle注入到此文件。