- 現(xiàn)在我們有些基層模塊依賴于一些全局變量，比如jquery.我們開始怎么設置全局變量.以jquery為例；
- 首先我們安裝jquery;
cnpm i jquery; - 我們在a.js中引入jquery并打印，啟動服務。在控制臺可以看到jquery引入成功了；
a.js
import $ from 'jquery';
console.log($)
- 但是我們console.log(window.$)，卻得到了undefined;
- 為了把jquery掛載到window下，我們需要expose-loader
- loader可以分為
pre 前面執(zhí)行的loader
normal 普通loader
內(nèi)聯(lián)的loader
post 后置loader
- 現(xiàn)在我們在a.js中
import $ from 'expose-loader?$!jquery'; // 暴露jquery 為 $
console.log($)
console.log(window.$)
-
現(xiàn)在控制臺打印成功了
image.png -
現(xiàn)在我們不用內(nèi)聯(lián)，配置到webpack中；
image.png a.js中直接import $ from 'jquery'；
控制臺同樣打印了window.jquery;
*再來我們不想再要用的js中引入jquery .我們想在每個模塊中注入$對象，直接使用；
- 我們需要在webpack.config.js 中引入webpack插件；
我們引入
const Webpack = require('webpack');
module.exports = {
plugins: [
new Webpack.ProvidePlugin({
$: 'jquery'
})
]
}
-
然后我們在a.js中直接打印
，啟動服務可以看到控制臺直接打印了jquery；
image.png 此時
是undefined.如果想要window.$也存在，一樣像方面在模塊中配置expose-loader就行了
現(xiàn)在說一種情況，比如我們在index.html中通過script引入了jquery的cdn。然后我們在a.js中又import $ from 'jquery'; 此時打包后悔發(fā)現(xiàn)
jquery被打包到了打包后的js中，此時我們是不希望jquery被打包的。我們可以在webpack.config.js中配置externals選項；
externals:{
jquery: '$'
},
- 此時我們打包就可以看到打包后的文件要比剛才小了。說明jquery沒有被打包進去
- 打包圖片方式有幾種
js中引入圖片
css中引入比如背景圖
html 中img 直接引入
-
js中；
image.png
-
啟動服務可以看到 找不到圖片
image.png - 此時'./img/1.jpg'就相當于是字符串，所以找不到。
- 那我就用import引入圖片，并且需要file-loader解析(file-loader默認會在內(nèi)部生成一張圖片到build目錄下，并且把生成圖片的名字返回)；
- 安裝
cnpm i file-loader --save-dev -
然后在wepback.config.js中配置
image.png - 然后在a.js中創(chuàng)建圖片
import pic from './img/1.jpg';
let img = new Image();
img.src = pic;
document.body.appendChild(img)
-
繼續(xù)把a.js清空，我們通過css背景圖中使用；我們在index.less中引入背景圖片
image.png -
這里css-loader直接回轉換url為對應的圖片地址
image.png -
我們在html中直接引入
image.png -
我們打包后發(fā)現(xiàn)圖片找不到，
image.png 這里我們需要用到一個插件來處理 安裝
cnpm i html-withimg-loader -Dwebpack.config.js
{
test: /\.html$/,
use: 'html-withimg-loader'
},
-
然后把img css js中圖片都加上，打包看效果，可以看到都成功了
image.png
現(xiàn)在我們發(fā)現(xiàn)如果有些圖片比較小，不想發(fā)起請求獲取圖片，直接通過base64打包到代碼中，我們就需要一個url-loader 了
安裝
cnpm i url-loader -D-
webpack.config.js中的file-loader換為url-loader
image.png 然后我們打包 可以看到圖片被打包成base64 了
-
然后我們試試吧大小寫小一些
image.png -
再打包，可以看到圖片沒有被打包成base64
image.png
-
接下來我們把css img等在打包后進行分類，我們可以在'url-loader'下添加outputPath: 'img/',并打包
image.png
- 可以看到圖片被打包到了img目錄下
-
我們要把css 也打包到css目錄下也類似的在插件MiniCssExtractPlugin下配置filename就可以
image.png
- 我如果打包后的文件要放到cdn上，所有的資源都指向同一個域名，我們就可以在webpack.config.js中配置 publicPath;
-
比如
image.png -
打包后的文件都會自動加上publicPath了
image.png
