Webpack核心简介

发表于 更新于 分类于

webpack 是一个现代 JavaScript 应用程序的静态模块打包器

entry

entry 属性指定一个入口起点（或多个入口起点）。默认值为 ./src。

单个入口（简写）语法

用法：entry: string | Array

1
2
3
4
5
6
7
8
9
10
const config = {
  entry: "./path/to/my/entry/file.js"
};
// 等同于
const config = {
  entry: {
    main: "./path/to/my/entry/file.js"
  }
};
// 注：当向 entry 传入一个数组时，将创建多个主入口，并且将它们的依赖导向到一个依赖图。

对象语法

用法：entry: {[entryChunkName: string]: string|Array}

1
2
3
4
5
6
7
8
// entry: string | Array

const config = {
  entry: {
    app: "./src/app.js",
    vendors: "./src/vendors.js"
  }
};

output

output 属性指定 webpack 在哪里输出它所创建的包，以及如何命名这些文件，默认值为 ./dist。

单入口用法

1
2
3
4
5
6
7
8
9
10
11
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", // 输出包的文件名
    publicPath: "/" // 输出包中解析文件的目录
  }
};
// 注： path 模块是 Node.js 的 API，这里不作为重点

多入口用法

1
2
3
4
5
6
7
8
9
10
11
{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js', // [name]将会编译为 app | search
    path: _dirname + '/dist'
  }
}
// 注：通过占位符使没个文件具有唯一的名称

loader

loader 熟悉指定 webpack 解析那些非 JavaScript 文件，并转换为 webpack 能够处理的有效模块。

1
2
3
4
5
6
7
8
9
10
11
12
13
const path = require("path");

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

module.exports = config;
// 注：test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。use 属性，表示进行转换时，应该使用哪个 loader。

plugins

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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" }) // 需要使用 new 来创建实例
  ]
};

module.exports = config;

提高效率的插件

插件说明
webpack-dashboard可以更友好的展示相关打包信息。
webpack-merge提取公共配置，减少重复配置代码
speed-measure-webpack-plugin简称 SMP，分析出 webpack 打包过程中 Loader 和 Plugin 的耗时，有助于找到构建过程中的性能瓶颈
size-plugin监控资源体积变化，尽早发现问题
HotModuleReplacementPlugin模块热替换

mode

通过设置模式来启用相应模式下的 webpack 内置的优化

1
2
3
module.exports = {
  mode: "production"
};

支持以下字符串值：

选项描述
development会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
production会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.