0%

Webpack 构建工具

webpack 简介

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

核心概念

  • entry(入口)webpack 开始构建的入口模块,从该入口开始构建并计算直接或间接依赖的模块或库
  • output(输出)webpack 对文件的命名和输出
  • loader(加载器)对于非 js 文件处理需要依赖 loader
  • plugins(插件)plugins 将不同的事件运行在不同生命周期的 hook(钩子)中提供具体功能
  • mode(模式)内置优化参数,可选 production(生产模式) developement(开发模式)none(无优化参数)

安装 webpack

1
2
npm install -D webpack webpack-cli    // 安装 webpack 组件和命令行工具
npm install -D webpack-dev-server // 安装 webpack 开发服务器

配置文件:工作目录下的 webpack.config.js

常用配置

ES6 转 ES5

1
npm install -D babel-loader @babel/core @babel/preset-env
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
module: {
rules: [
{
test: /\.m?js$/,
// exclude: /(node_modules|bower_components)/,
include: [resolve("src")],
use: {
loader: "babel-loader",
options: {
presets: ["@babel/preset-env"],
plugins: []
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: "public/index.html",
filename: "index.html"
})
]

静态资源打包

安装依赖

1
2
npm install -D css-loader style-loader
npm install -D url-loader file-loader

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: "url-loader",
options: {
limit: 1024 * 8,
name: "imgs/[name].[hash:7].[ext]",
esModule: false // 打包图片路径显示为 [object Module] 设置此项
}
}
]
}
]
}

file-loader 5.0.0 及以后版本 esModule 选项默认值为 true,可能会导致打包后的图片路径显示为 [object Module] 的问题,设置 esModule 值为 false 即可正常显示图片,详见 Github Release

vue 组件打包

安装依赖

1
2
npm install -S vue
npm install -D vue-loader vue-template-compiler

webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
module: {
rules: [
{
test: /\.vue$/,
loader: "vue-loader"
}
]
},
plugins: [
new VueLoaderPlugin()
]