webpack4.15.1 学习笔记(十) — 常见 loader 使用
目录
style -loader <= css-loader <= less-loader
-
style-loader 将css样式插入到html中
-
css-loader 解析import、require 路径处理
-
less-loader 将less解析为css
{
test: /\.less$/,
use: [{
loader: 'style-loader', // 配置成一个对象
options: {
insertAt: 'top' // 设置解析后的样式 插入html的位置，top为最上面，目的是为了使得用户在html中编写的样式优先级最高
}
}, 'css-loader','less-loader']
},
postcss-loader
配合autoprefixer插件，给css 添加浏览器前缀，需要在解析css代码之前使用。（写在css-loader之后，因为loader执行顺序是从右往左）
需要一个配置文件：postcss.config.js
postcss.config.js
module.exports = {
plugins: [require('autoprefixer')] // 给css添加浏览器前缀
}
{
test: /\.less$/,
use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
},
file-loader
默认会在内部生成一张图片，到build目录下，再返回生成的图片名称，在css中可以直接使用，因为使用了css-loader，会进行require操作，在js文件中使用图片，则需要import 或者require操作。
body {
background: url('./logo.png') /* css-loader 会转换为 url(require('./logo.png')) */
}
// index.js
import logo from './logo'
let image = new Image()
image.src = logo
document.body.appendChild(image)
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
},
url-loader
使用url-loader可以对解析的图片的规格进行一些限制。当图片小于 xx K时，用base64来转化，可以减少http请求(但是base64生成的文件，会比源文件大1/3，是base64的特点)。否则是file-loader
{
test: /\.(png|svg|jpg|gif)$/,
use: {
loader: 'url-loader',
options: {
limit:200*1024,
outputPath:'img/',
publicPath: 'http://www.xxx.com' // 资源放至cdn服务器后，可以配置请求域名等
}
}
},
html-withimg-loader
解析html中 引入的图片，
<div>
< img src="./logo.png" /> <-- 会使用打包生成的文件名-->
</div>
{
test: /\.html$/,
use: ['html-withimg-loader']
},
babel-loader
babel默认只转换新的 JavaScript 语法，如箭头函数，不能转换新的 API，如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转译。
npm install babel-loader @babel/core @babel/preset-env -D
npm install @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties -D
npm install @babel/plugin-transform-runtime -D
npm install @babel/runtime @babel/polyfill
{
test: /\.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'], // 预设，转换js语法
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }], // 解析类的装饰器
["@babel/plugin-proposal-class-properties", { "loose": true }], // 解析类的属性
"@babel/plugin-transform-runtime", // 解析promise，Generator等新的API
"@babel/polyfill" // 解析实例上的方法
]
}
},
include: path.resolve(__dirname, 'src'),
exclude: /node_modules/
}
expose-loader
npm install jquery
npm install expose-loader -D
- 在模块中，使用内联loader，完成向全局暴露一个变量
import $ from 'expose-loader?$!jquery'
console.log(window.$) // 打开浏览器，打印成功
- 通过webpack配置模块规则，向每个引入jquery的模块中注入全局变量
import $ from 'jquery'
// webpack.config.js
module: {
rules: [{
test: require.resolve('jquery'),
use: 'expose-loader?$'
}
}
- 其他暴露变量的方法：ProvidePlugin(内置)：提供插件 — 可以用来向每个模块注入变量，但
不能通过通过window.$来访问，并未暴露给全局，仅在每个模块中使用
// webpack.config.js
const webpack = require('webpack');
module: {
// ...
plugins: [
new webpack.ProvidePlugin({
$:'jquery'
}),
],
}
- cdn引入，但不打包
<-- index.html -->
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
// index.js
// 此时在文件中，可以拿到 $ 对象
// 但是如果再次通过 import 引入jquery，就会被重复打包，使打包后的文件，体积变大
import $ from 'jquery'
// webpack.config.js
module: {
// ...
externals: { // 分别对比配置该属性前后，打包后文件的体积，明显变小
jQuery: '$'
},
}
