參考
file-loader
url-loader
webpac3.x成神之路
file-loader & url-loader
-
file-loader
解決CSS等中引入圖片的路徑問題；(解決通過url,import/require()等引入圖片的問題)
file-loader可以解析項目中的url引入（不僅限于css），根據(jù)我們的配置饭耳，將圖片拷貝到相應(yīng)的路徑，再根據(jù)我們的配置术奖，修改打包后文件引用的路徑，使之指向正確的文件。
-
url-loader
當(dāng)圖片小于設(shè)置的limit參數(shù)值時效床，url-loader將圖片進(jìn)行base64編碼(當(dāng)項目中有很多圖片身堡，通過url-loader進(jìn)行base64編碼后會減少http請求數(shù)量邓尤，提高性能)，大于limit參數(shù)值贴谎，則使用file-loader拷貝圖片并輸出到編譯目錄中汞扎；
配置
1.創(chuàng)建本地項目webpack-demo
mkdir webpack-demo
cd webpack-demo
2.在webpack-demo的根目錄下創(chuàng)建package.json文件
npm init -y
- 安裝
webpack依賴包
npm i webpack webpack-cli webpack-dev-server --save-dev
模塊說明：
webpack
webpack核心webpack-cli
webpack的腳手架（啟動器）webpack-dev-server
開發(fā)環(huán)境下用于實時加載依賴
4.修改package.json文件的scripts屬性值,進(jìn)行打包資源的配置
"scripts": {
"dev": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
},
5.安裝相關(guān)的loader
npm install file-loader url-loader --save-dev
6.在webpack.config.js中配置
const path = require('path');
// 顯示進(jìn)程的完成進(jìn)度
var ProgressBarPlugin = require('progress-bar-webpack-plugin');
// 設(shè)置進(jìn)度字體顏色
const chalk = require('chalk');
// 輸出html
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 分離css代碼
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: 'development',
entry: {
app: './src/app.js'
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].[hash].js'
},
devServer: {
baseContent: path.resolve(__dirname, '../dist'),// 靜態(tài)資源根目錄
host: 'localhost',//服務(wù)器IP地址，默認(rèn)是localhsot
port: 5527,//服務(wù)監(jiān)聽的端口號
compress: true,// 是否開啟服務(wù)端壓縮（gzip）
},
module: {
rules: [
{
test: /\.jsx?$/,
use: [
{loader: 'babel-loader'}
]
},
{
test: /\.css$/,
use: [
// {
// loader: 'style-loader',
// options: {
// singleton: true,// 單獨的style
// }
// },
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
}
]
},
{
test: /\.less$/,
use: [
// {
// loader: 'style-loader'
// },
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'less-loader'
}
]
},
{
test: /\.scss$/,
use: [
// {
// loader: 'style-loader'
// },
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'postcss-loader'
},
{
loader: 'sass-loader'
}
]
},
{
test: /\.(jpg|png|jpe?g|gif|svg)(\?.*)?$/i,
use: [
{
loader: 'url-loader',
options: {
outputPath: 'images/',// 輸出目錄
name(file) {// 輸出名稱
if(process.env.NODE_ENV === 'development') {
return '[path][name].[ext]'
}
return '[hansh].[ext]'
},
limit: 5*1024
}
}
]
},
{
test: /\.(eot|woff2?|ttf|svg)$/,
use: [{
loader: 'url-loader',
options: {
name: '[name]-[hash:5].min.[ext]',
limit: 5000,
publicPath: '../static/fonts/',
outputPath: 'fonts/'
}
}]
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Webpack Study Demo',
filename: 'index.html',//指定生成的HTML文件名
template: path.join(__dirname, '../public/index.html') // 指定模板路徑
}),
new ProgressBarPlugin({
format: chalk.green('Progressing') + '[:bar]' + chalk.green(':percent') + '(:elapsed seconds)',
clear: false
}),
new MiniCssExtractPlugin({
filename: '[name].css',// 分離后的文件名
chunkFilename: '[id].css',//
ignoreOrder: false
})
]
}
7.運行命令
npm run build
8.結(jié)果展示
9.運行命令
npm run dev
10.結(jié)果展示
- 注意
使用url-loader通常用于處理css中的圖片;
處理html中的圖片可以使用html-withimg-loader
html-withimg-loader處理html中的圖片
1.安裝
npm install html-withimg-loader --save
2.在webpack.config.js中進(jìn)行配置
{
test: /\.(htm?l)/i,
use: {loader: 'html-withimg-loader'}
},
3.執(zhí)行命令
npm run dev
4.執(zhí)行命令
npm run dev
5.結(jié)果展示
