Webpack之恋(1)-4种核心概念解析

Webpack简介

Webpack是web前端构建工具,它为浏览器打包CommonJs/AMD模块。你可以把前端的javascript、css、图片等模块化,通过Webpack把这些分散的资源打包程完整的资源,供web使用。
webpack

Entry(入口)

你可以理解为entry是webpack的main函数,不同的是webpack有很多个entry,每个entry是相互独立的,是一个独立的逻辑入口。

我们一般在webpack的配置文件通过entry属性定义入口,如

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

Output(产出物)

有输入就有输出,把分散到各模块的前端资源打包后的产出物需要知道存放在哪里。我们可以在webpack配置文件通过output属性指定产出物的设置。

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

上面的例子中使用output.path和output.filename来设置产出物的存放位置。

Loader(装载器)

webpack把每个文件(css,html,scss,jpg等)都当做一个模块来处理,但webpack只懂JavaScript,因此就要靠装载器来把他们转换成webpack能识别的资源。
webpack过程

在配置文件中相关配置是通过rules的test和use属性来设置的,test表示那些资源被装载,use表示由什么装载器来装载test的资源。

const path = require('path');

const config = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{test: /\.(js|jsx)$/, use: 'babel-loader'}
]
}
};

module.exports = config;

上面的配置表示以.js或.jsx结尾的文件由babel-loader装载器装载。

Plugin(插件)

装载器(loader)只能处理文件,而插件是无所不能的。为了使用插件,你需要先require()它,然后再把它的实例(new)加入到webpack配置文件的plugins数组中,而且每个插件一般都具有很多可配置的选项,以便自定义。

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed 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-webpack.bundle.js'
},
module: {
rules: [
{test: /\.(js|jsx)$/, use: 'babel-loader'}
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};

module.exports = config;

总结

entry、output、loader、plugin都有许多的定义和配置形式,但不管webpack功能多么丰富,都离不开这四个概念,只要明白了它们,后面就容易多了。

翟前锋 wechat
欢迎订阅我的微信公众号:zhaiqianfeng!