我们前面在快速入门部分学习的时候知道:使用webpack
打包非JS
文件的时候,是打包不成的,如果确实需要,需要加载对应的loader
,比如我们前面使用过 style-loader
和 css-loader
。
webpack
中 loader
的调用过程:
1. 在webpack
配置中使用loader
loader使用前要安装,这点我们无需多言,关于loader的使用方式,我们前面已经见过两种,不过都不是推荐的使用方式,这里我们再讨论一种使用配置文件配置loader
规则的用法。
1.1 配置打包css文件
安装对应的loader
npm install css-loader style-loader --save-dev
在 webpack.config.js
中的module
选项下的rules
数组中添加 loader
规则
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
}
配置说明:
test
表示匹配的文件类型,use
表示对应要调用的loader
- use 数组中指定的
loader
是有顺序的, 多个loader
的调用顺序是从后往前调用。
完整的配置类似这样的:
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
page1: ['./src/js/1.js', './src/js/2.js'],
page2: './src/js/3.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
//输出的打包文件可以加个目录
filename: 'js/[hash]-[name].b.js'
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
],
// 这里配置loader规则
module: {
rules: [
// 表示使用 .css结尾的文件使用'style-loader'和'css-loader'处理
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
}
};
1.2 配置打包less文件
安装对应的loader
npm install less-loader less --save-dev
在 webpack.config.js
中的module
选项下的rules
数组中添加 loader
规则
module: {
rules: [
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
]
}
完整的配置应该类似这样:
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
page1: ['./src/js/1.js', './src/js/2.js'],
page2: './src/js/3.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
//输出的打包文件可以加个目录
filename: 'js/[hash]-[name].b.js'
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
],
// 这里配置loader规则
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
]
}
};
1.3 样式文件中的文件路径处理
我们在编写页面的样式的时候,少不了要引入一些图片或者字体等文件,比如类似这样的:
div {
color: aqua;
width: 300px;
height: 300px;
background: url('../images/11.jpeg');
}
默认情况下webpack
是无法处理这些路径和文件的,我们需要安装对应的loader
去处理。
安装对应的loader
npm install url-loader file-loader --save-dev
在webpack
中配置使用:
module: {
rules: [
{
test: /\.jpg|png|gif|jpeg|ttf|eot|woff|woff2|svg$/,
use: 'url-loader?limit=88888&name=img/[name].[ext]'
}
]
}
或者这样配置:
module: {
rules: [
{
test: /\.jpg|png|gif|jpeg|ttf|eot|woff|woff2|svg$/,
use: 'url-loader',
options: {
limit: 10000,
name: 'img/[name].[hash:7].[ext]'
}
}
]
}
配置说明:
?
之后的是loader
的参数项limit
参数用来指定图片的大小,单位是字节(byte),当小于limit
设置的图片大小的时候,图片会被转为base64
编码的图片,否则url-loader
会自动调用file-loader
进行处理(复制到设置的目录中),参数也会直接传给file-loader
- 除了
limit
参数项之外,常见的参数项还有:name
:输出的文件名规则,如果不添加这个参数,输出的就是默认值:文件哈希;加上[path]
表示输出文件的相对路径与当前文件相对路径相同,加上[name].[ext]
则表示输出文件的名字和扩展名与当前相同。加上[path]
这个参数后,打包后文件中引用文件的路径也会加上这个相对路径。其它的通配符还有[hash:7]
、[hash]
等。outputPath
:表示输出文件路径前缀。图片经过url-loader
打包都会打包到指定的输出文件夹下。但是我们可以指定图片在输出文件夹下的路径。比如outputPath=img/
,图片被打包时,就会在输出文件夹下新建(如果没有)一个名为img
的文件夹,把图片放到里面。publicPath
:表示打包文件中引用文件的路径前缀,如果你的图片存放在CDN上,那么你上线时可以加上这个参数,值为CDN地址,这样就可以让项目上线后的资源引用路径指向CDN了
1.4 配置打包JS
高级语法
安装babel-loader
和babel-core
,由于ES6+
语法每年都在更新,因此,我们需要最新的规则去转换,可以使用babel-preset-env
解决这个问题。当然用惯了chrome
浏览器的朋友可能会觉得,常见的ES6+
的语法他都支持了啊,为啥还要转换,有这问题的人一定是没考虑过IE使用者的感受。
安装相关loader和包
# 安装babel转换器包
npm install babel-loader @babel/core @babel/runtime --save-dev
# 安装babel语法插件包
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties --save-dev
对babel
进行配置
在项目根目录中,创建 babel 配置文件 babel.config.js
(或者.babelrc
)并初始化基本配置如下:
module.exports = {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}
在webpack
中配置使用:
module: {
rules: [
{
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
}
]
}
配置说明:
exclude
表示排除 node_modules
文件夹中的文件,即:node_modules
文件夹中的代码不被编译。
完整的配置类似这样:
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
page1: ['./src/js/1.js', './src/js/2.js'],
page2: './src/js/3.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
//输出的打包文件可以加个目录
filename: 'js/[hash]-[name].b.js'
},
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
],
// 这里配置loader规则
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
{
test: /\.jpg|png|gif|jpeg|ttf|eot|woff|woff2|svg$/,
use: 'url-loader?limit=8888&name=img/[name].[ext]'
},
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
]
}
};
配置完以后,我们写的高级语法会被转换成比较成熟的语法,解决部分浏览器兼容性问题,比如您可以写个箭头函数看看会被转成什么样子。
文档参考:
https://webpack.js.org/loaders/babel-loader
https://www.webpackjs.com/loaders/babel-loader/
webpack配置起来比较复杂,比较难记,不过好在是各种框架和库都依托webpack做的有自己的模板,各种配置都帮我们配置好了,到时候用到框架的时候并不需要这么繁琐的配置
更多webpack
内容可参考:https://www.webpackjs.com/concepts/loaders/