02-webpack核心概念
Opened this issue · 0 comments
loader
loader 是打包的方案,它告诉了 webpack 对于一些特定的文件该如何进行打包。
模块不一定只有 js 文件,可能还有 css、png 等文件。webpack 默认只能识别 js 文件,若是想引入别的文件,比如 import Avatar from './avatar.png'
,执行 webpack 命令之后遇到这行代码,它还并不知道该如何去打包 png 格式的文件,就会去 webpack.config.js 配置文件中去寻找如何打包。
图片文件
module.exports = {
// ...
rules: [
{
test: /\.png$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]', // placeholder
outputPath: 'images/',
},
},
},
],
// ...
};
以上的配置就是告诉 webpack 打包模块的规则,当遇到了以 .png 结尾的文件时,应该使用 file-loader 来对它进行打包。
file-loader 的打包过程:
- 将静态文件移动到配置的 outputPath 目录下(默认是 dist ),并重命名(可以通过placeholder配置)
- 将新得到的文件相对于 dist 的地址返回给引入它的变量
图片的打包也可以用 url-loader,会把图片直接转化成 base64:
rules: [
{
test: /\.png$/,
use: {
loader: 'url-loader',
options: {
name: '[name].[ext]', // placeholder
outputPath: 'images/',
limit: 2048,
},
},
}
],
使用 url-loader,根据 options.limit 选项,若图片大小小于 2kb,则图片会直接被打包生成 base64 字符串直接返回在打包生成的 js 文件内,若大于 2kb,则会像 file-loader 一样打包。
file-loader 和 url-loader 可以接收并加载任何文件,然后将其输出到构建目录。
样式文件
- css 文件
为了在 JavaScript 模块中 import 一个 css 文件,需要安装 style-loader 和 css-loader,并在 module 配置中这样添加 rules:
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
];
css-loader 能让 css 文件识别类似 @import './test.css'
的语法,将多个 css 文件合并成一个 css 文件。
style-loader 作用是将最终生成的 css 代码字符串挂载到 header 标签的 style 标签底下。
- sass
使用 sass-loader
rules: [
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
];
打包过程:首先通过 sass-loader 对文件进行翻译,变成 css,再通过 css-loader 和 'style-loader 完成打包。
css module
// ...
{
test: /\.scss$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 2,
modules: true, // 支持 css 模块化
},
},
'sass-loader',
],
}
// ...
plugins
plugins 可以在 webpack 打包的某个时刻帮我们做一些事情。
HtmlWebpackPlugin 会再打包结束后自动生成一个 html 文件,并把打包生成的 js 自动引入到这个 html 文件中。
// ...
plugins: [new HtmlWebpackPlugin({
template: './index.html'
})]
// ...
index.html 是自动生成的 html 的模版。
Devtool
此选项控制是否生成,以及如何生成 source map。
sourceMap 是一个映射关系,他知道打包生成的 js 代码每一行对应的是源代码的哪个 js 文件中哪一行代码。更容易追踪错误。
使用了 sourceMap 会使打包的速度变慢,会生成 main.js.map,这个文件会对打包后的代码和源代码生成映射关系。
webpack-dev-server
webpack-dev-server 提供了一个简单的 web server,并且具有 live reloading 功能。
- 安装
npm install webpack-dev-server -D
- webpack 配置文件
// ...
devServer: {
contentBase: './dist',
open: true,
port: 8888,
},
// ...
执行命令 webpack-dev-server
contentBase 告诉 dev server 从哪个未知查找文件;open 表示自动打开浏览器;
webpack-dev-server 并不会像 webpack 一样将打包好的文件放在 dist 目录,而是放在内存中,这样能够提升打包的速度。
模块热更新
模块热替换(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新所有类型的模块,而无需完全刷新。