WebPack是一个现代Js应用的静态模块打包器,使用Webpack处理应用时,它会递归地构建一个依赖关系图,其中包含了应用所需的各个模块,并将这些模块打包为一个或多个bundle。
Webpack有四个核心概念
- 入口(Entry)
- 输出(Output)
- Loader
- 插件(Plugins)
入口
它负责指示Webpack使用哪个模块作为构建内部依赖图的起始点,进入起点后,Webpack会找出起点所依赖的模块和库,Webpack中有多种方式来定义起点,例如:
//单个入口(简化)
const config = {
entry: "./src/main.js"
}
//对象语法
const config = {
app: "./src/main.js",
vendors: "./src/vendors.js"
}
输出
output指示webpack在哪里输出它创建的bundle以及如何命名它们,例如:
const config = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, 'dist')
}
}
loader
loader使得webpack可以处理非js文件(webpack本身只理解js),loader可以将所有文件转换为webpack能够处理的模块,例如在开发时使用ES6,再通过loader转换为ES5,如下配置:
const config = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader",
options: [
presets: ["env"]
]
}
]
}
}
插件
插件的功能则更为强大,可以做包括打包优化、压缩、定义环境变量等事宜,插件配置只需要使用require(),然后再添加到plugins数组中即可,如下所示
// 通过 npm 安装
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 用于访问内置插件
const webpack = require('webpack');
const config = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
},
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};