webpack入门学习-基础篇

发表于 | 分类于 | 阅读次数:
webpack是目前很流行的打包工具，但是它的高度配置特性可以使得它有替代自动化构建工具的能力，而且vue-cli本身也是集成webpack的，作为vue的学习者了解它是很有必要的。

webpack是目前很流行的打包工具，但是它的高度配置特性可以使得它有替代自动化构建工具的能力，而且vue-cli本身也是集成webpack的，作为vue的学习者了解它是很有必要的。

介绍

webpack是一个现代的javascript应用程序的模块打包器。

当webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序所需要的每个模块，然后将这些所有的模块打包成少量的bundle，通常只有一个，以方便浏览器去加载。

特性

webpack是高度可配置的

首先要理解它的四个概念：

  • 入口(entry)
  • 输出(output)
  • loader
  • 插件(plugins)

入口

webpack创建应用程序所有依赖的关系图，图的起点被称为入口起点。入口起点告诉webpack从哪里开始，并根据依赖关系图确定需要打包的内容。可以将应用程序的入口起点看作是根上下文或者app的第一个启动文件。

在webpack中，我们通过使用webpack配置对象中的entry属性来定义入口。

1
2
3
4
5
// webpack.config.js

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

出口

将所有需要的资源归拢在一起后，还需要告诉webpack在哪里打包应用程序。webpack的output属性描述了如何处理归拢在一起的代码。

1
2
3
4
5
6
7
8
9
10
11
// webpack.config.js

const path = require('path'); // 引用path模块

module.exports = {
    entry: './path/to/my/entry/file.js',
    output: {
        path: path.resolve(__dirname, 'dist'), // 只能使用绝对路径
        filename: 'first_webpack.bundle.js'
    }
};

通过output.path和output.filename属性，指定了webpack bundle的生成地址和是生成(emit)的文件名。

项目生成(emitted或emit)是贯穿webpack的核心，表示生产或者排放。

loader

webpack的目标是，让webpack聚焦于项目中的所有资源(assets)，而浏览器不需要关注考虑这些(但是这不以为着所有的资源都必须打包到一起)。

webpack把每个文件(.css, .html, .scss, .jpg, etc)都作为模块来处理。然而webpack自身只理解Javascript。

webpack loader在文件被添加到依赖图中时，将其转换为模块。

在更高层面，webpack中配置loader有两个目标。

  1. 识别(identify)出应该被对应的loader进行转换(transform)的那些文件。(test属性)
  2. 转换这些文件，从而使其能够被添加到依赖图中(并且最终添加到bundle中)(use属性)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// webpack.config.js

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'
    },
    module: {
        rules: [ // 使用规则
            {
                test: /.txt$/, // 匹配文件 正则语法
                use: 'raw-loader' // 使用loader
            }
        ]
    }
}

以上配置中，对一个单独的module对象定义了rules属性，里面包含2个必须的属性：test和use。这告诉webpack编译器(compiler)如下信息：

webpack编译器，在碰到require或者import语句中被解析为’.txt’后缀的路径时，在对其打包之前，先使用raw-loader处理一下。

注意在webpack中定义loader的时候，要定义在module.rules中，而不是rules。否则webpack会给出严重的警告。

plugins

由于loader仅在每个文件的基础上进行转换，而plugins(插件)更常用于(但不限于)在打包的compliation和chunk生命周期执行操作和自定义功能。webpack的插件系统极其强大和可定制化。

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); // install via npm
const webpack = require('webpack')； // to access built-in plugins
const path = require('path');

const config = {
    entry: './path/to/my/entry/file.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.txt$/,
                use: 'raw-loader'
            }
        ]
    },
    plugins: [
        new webpack.optmize.UglifyJsPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

webpack包含了一些内建(built-in)的插件。插件列表

参考资料

webpack官方docs

入门Webpack，看这篇就够了

有钱，任性！！！