webpack 是当下最热门的前端资源模块化和打包工具。它可以将许多松散的模块(如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等)按照依赖和规则打包成符合生产环境部署的前端资源。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图表,其中包含应用程序需要的每个模块,然后将这些模块打包成一个或多个 bundler,由浏览器加载
在了解 webpack 使用配置时,我们必须首先要熟悉下面四个核心概念:
- entry:入口
- output:出口
- loaders:加载器
- plugins:插件
一、entry:入口
在 webpack 执行处理应用程序时,会形成一个依赖关系图表。在这个图表的起点就是入口起点(entry point),进入这个入口后,webpack 就可以计算出入口点依赖的模块和库。
如何在 webpack.config.js 中配置入口点呢?
单个入口语法
用法: entry: string |Array
// webpack.config.js
const config = {
entry: './path/to/my/entry/file.js'
};
module.exports = config;
单个入口简写:
// webpack.config.js
const config = {
entry: {
main: './path/to/my/entry/file.js'
}
};
当你想要注入多个依赖文件时,可以向 entry 属性传入一个数组,数组是由文件路径组成。这样可以快速地设置 webpack 的配置,创建“多个主入口(multi-main entry)”,但这种方法不利于配置的扩展。
对象语法
用法:entry: {[entryChunkName: string]: string|Array
// webpack.config.js
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
}
对象语法虽然繁琐,但是它是应用程序入口最可扩展的方式。
**“可扩展的 webpack 配置”是指,可重用并且可以与其他配置组合使用。用于将关注点从环境、构建目标、运行时中分离。然后使用专门的工具(如 webpack-merge)将它们合并。
常用场景
1、分离应用程序和第三方库入口
// webpack.config.js
const config = {
entry: {
app: './src/app.js',
vendors: './src/vendors.js'
}
};
webpack 创建的依赖图是彼此完全分离、相互独立的,上述写法比较适用于单页面应用程序。
执行 webpack 时,会使用 commonChunkPlugin 从 bundle 文件中提取 vendor 引用到 vendor bundle,并把引用 vendor 的部分替换为 webpack_require() 调用。
2、多页面应用程序
// webpack.config.js
const config = {
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js'
}
}
webpack 在多页面应用中,会使用 commonChunkPlugin 为每个页面应用创建 bundle 文件,在入口起点中时每个页面都能对代码和模块实现复用。
二、output:输出
这是属性的作用是:控制 webpack 如何向硬盘写入编译文件。需要注意的是,即使是存在多个入口起点,也只指定一个输出配置。
1、用法
在 output 属性中需要配置 filename 和 path 两个配置项:
- filename:输出文件的文件名
- path:目标输出的目录,是一个绝对路径
// webpack.config.js
const config = {
output: {
filename: 'bundle.js',
path: '/home/proj/public/assets'
}
};
module.exports = config;
此配置将一个单独的 bundle.js 文件输出到 /home/proj/public/assets 目录中。
2、多个入口起点
如果配置中存在多个入口起点,则需要使用一定的标识符确保每个输出的文件名的唯一性。
// webpack.config.js
{
entry: {
app: './src/app.js',
search: './src/search.js'
},
output: {
filename: '[name].js',
path: __dirname + '/dist'
}
}
// 写入到硬盘:./dist/app.js, ./dist/search.js
为了确保每个输出 bundle 名称的唯一性,需要借用一下方式来替换:
// 1、使用入口名称
filename: "[name].bundle.js"
// 2、使用内部 chunk id
filename: "[id].bundle.js"
// 3、使用每次构建生成的唯一的 hash
filename: "[name].[hasn].bundle.js"
// 4、使用基于每个 chunk 内容的 hash
filename:“[chunkhash].bundle.js”
三、loader:加载器
loader 是用于对模块的源代码进行转换。在需要加载模块时对其做预处理,它可以将文件从不同的语言(如 typescript)转换为 JavaScript,或将内联图像转为 data URL,甚至允许你直接在 JavaScript 模块中 import CSS文件。
1、使用 loader 的三种方式
- 配置(推荐):在 webpack.config.js 文件中指定 loader
- 内联: 在每个 import 语句中显示指定 loader
- CLI: 在 shell 命令中指定它们
配置:
在 modul.rules 中允许你在 webpack 配置中指定多个loader。
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}
内联
import Styles from 'style-loader!css-loader?modules!./styles.css';
使用 ! 将资源中的 loader 分开,分开的每部分都相对于当前目录解析。通过前置所有规则及使用 !,通过对选项传递查询参数,可以对应覆盖到配置中的任意 loader。
CLI
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
上述是使用 webpack 命令,对 .jade 文件使用 jade-loader,对 .css 文件使用 style-loader 和 css-loader。
2、loader 所具有的特性
- loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个loader 返回值给下一个 loader。在最后一二 loader,返回 webpack 所预期的 JavaScript。
- loader 可以是同步的,也可以是异步的。
- 运行在node.js 中,并且能够执行任何可能的操作。
- 接收查询参数,用于对 loader 传递配置
- 可以使用 options 对象进行配置
- 除了使用package.json 常见的 main 属性,还可以将普通的 你怕吗 模块导出为 loader
- 插件可以为 loader 带来更多特性
- loader 能够产生而外的任意文件
四、plugins:插件
webpack 中的插件的出现,主要是为了实现 loader 无法实现的功能,是webpack 中核心部分。
webpack 插件是一个具有 apply 属性的 JavaScript 对象,apply 属性会被 webpack 编译器调用,并且编译器对象可以在整个编译生命周期访问。
用法
在 webpack 配置中,你可以携带参数或者选项,想 plugins 属性中传入 new 实例:
1、在配置中传入 new 实例
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //通过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');
const config = {
entry: './path/to/my/entry/file.js',
output: {
filename: 'my-first-webpack.bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: 'babel-loader'
}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
2、Node API 传入 new 实例
//
戳我博客