一、环境搭建
- 创建空目录和 package.json
- mkdir my-project
- cd my-project
- npm init -y
- 安装 webpack 和 webpack-cli
npm install webpack webpack-cli --save-dev
检查是否安装成功:./node_modules/.bin/webpack -v
二、Entry
-
指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。
-
单入口:entry 是一个字符串
module.exports = {
entry: './path/to/my/entry/file.js',
};
- 多入口:entry 是一个对象
module.exports = {
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js'
}
};
二、Output
-
告诉 webpack 在哪里输出它所创建的 bundle,以及如何命名这些文件
-
单入口配置
const path = require('path');
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
};
- 多入口配置
// 通过占位符确保文件名称的唯一
const path = require('path');
module.exports = {
entry: {
app: './src/app.js',
adminApp: './src/adminApp.js'
},
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
}
}
三、Loader
- webpack 开箱即用只支持 JS 和 JSON 两种文件类型,通过 Loaders 去支持其他文件类型并把他们转化成有效的模块,并且可以添加到依赖图中
- 本身是一个函数,接收源文件作为参数,返回转换到结果
- test:指定匹配规则
- use:指定使用的 loader 名称
名称 | 描述 |
---|---|
babel-loader | 转换 ES6、ES7 等 JS 新特性与法 |
css-loader | 支持 .css 文件的加载和解析 |
less-loader | 将 less 文件转换为 css |
ts-loader | 将 TS 文件转换为 JS |
file-loader | 进行图片、字体等的打包 |
raw-loader | 将文件以字符串的形式导入 |
thread-loader | 多进程打包 JS 和 CSS |
const path = require('path');
module.exports = {
output: {
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [{
test: /\.txt$/, use: 'raw-loader'
}],
},
};
- webpack 编译器当碰到「在 require()/import 语句中被解析为 ‘.txt’ 的路径」时,在对它打包之前,先 use raw-loader 转换一下
- 使用正则表达式匹配文件时,你要为它添加引号
四、Plugin
- 打包优化,资源管理,注入环境变量;
- 作用于整个构建过程;
- 在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用 new 操作符来创建一个插件实例;
名称 | 描述 |
---|---|
CommonsChunkPlugin | 将 chunks 相同的模块代码提取成公共 js |
ClearWebpackPlugin | 清理构建目录 |
ExtractTextWebpackPlugin | 将 css 从 bundle 文件里提取成一个独立的 css 文件 |
CopyWebpackPlugin | 将文件或文件夹拷贝到构建的输出目录 |
HtmlWebpackPlugin | 创建 html 文件去承载输出的 bundle |
UglifyjsWebpackPlugin | 压缩JS |
ZipWebpackPlugin | 将打包出的资源生成一个 zip 包 |
- 例:html-webpack-plugin 为应用程序生成一个 HTML 文件,并自动注入所有生成的 bundle
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
module.exports = {
module: {
rules: [{
test: /\.txt$/, use: 'raw-loader'
}],
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
};
五、Mode
- 用来指定当前的构建环境: development、production 或 none
- 设置 mode 可以使用 webpack 内置的函数,默认值为 production
module.exports = {
mode: 'production'
};