webpack處理html
html-webpack-plugin這個plugin曝光率很高，他主要有兩個作用
- 為html文件中引入的外部資源如script、link動態(tài)添加每次compile后的hash，防止引用緩存的外部文件問題
- 幫助你自動生成 HTML 文件到build文件夾一铅，比如單頁面可以生成一個html文件入口，配置N個html-webpack-plugin可以生成N個頁面入口。
簡單的來說颖杏，運行npm start之后你會神奇的看到在你的 build 文件夾會生成一個 index.html 文件和一個 bundle.js 文件，而且 index.html 文件中自動引用 webpack 生成的 bundle.js 文件坛芽。所有的這些都是 html-webpack-plugin 的功勞留储。
Webpack 插件使用三步曲：安裝>引入>配置
npm 安裝
npm install --save-dev html-webpack-plugin
yarn 安裝
yarn add html-webpack-plugin --dev
引入：
const HtmlWebpackPlugin = require('html-webpack-plugin');
配置：
new HtmlWebpackPlugin({
title: 'test page', //html標(biāo)題
filename: 'index.html', //打包后的html文件名翼抠，默認(rèn)index.html
template: './index.html', // html的源文件
inject: true, //默認(rèn)true，意為script標(biāo)簽位于html文件的 body 底部
cache: true, //默認(rèn)true获讳，表示內(nèi)容變化的時候生成一個新的文件
chunks: ['index'], //表示編譯時用到的入口文件
date: new Date(),
// excludeChunks: ['index']//表示編譯時排除的入口文件
}),
如果需要復(fù)制多個頁面到成產(chǎn)環(huán)境的話阴颖，多引入幾次。
詳細配置和使用方法見：webpack4 之html-webpack-plugin
webpack處理css
1最基本的CSS處理
Webpack最基本的css處理：css-loader + style-loader丐膝。其中css-loader用于處理css文件中的@import和url(...)量愧，而style-loader用于將css-loader的輸出生成js中的函數(shù)調(diào)用將css動態(tài)添加到html文件中。
安裝css-loader和style-loader：
npm install --save-dev css-loader style-loader
然后配置webpack.config.js帅矗，使webpack可以將css文件當(dāng)做module對待（即可以進行import操作）以及使用css-loader和style-loader對css文件進行處理偎肃。
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
css-loader 和style-loader兩者使用的時候是一起使用的缺一不可并且有先后順序的 要先使用 css-loader 轉(zhuǎn)碼，然后再使用 style-loader插入到文件中去安裝使用浑此。
2.單頁面應(yīng)用累颂，把JS里面的CSS單獨打包
style-loader將css以style標(biāo)簽的形式動態(tài)添加到html文件中，有時（特別是在生產(chǎn)環(huán)境下）我們希望將所有的css抽離為獨立的css文件凛俱，此時可以借助
-
mini-css-extract-plugin
將CSS提取為獨立的文件的插件紊馏，對每個包含css的js文件都會創(chuàng)建一個CSS文件，然后再link進頁面蒲犬。支持按需加載css和sourceMap
(1).安裝mini-css-extract-plugin：
npm install --save-dev mini-css-extract-plugin
(2).webpack.config.js 配置
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production';
module: {
rules: [
{
test: /\.css$/,
use : [
MiniCssExtractPlugin.loader,
{ loader: "css-loader" }
]
},
{
test: /\.less$/,
use : [
MiniCssExtractPlugin.loader,
{ loader: "css-loader" },
{ loader: "less-loader" }
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
// 這里的配置和webpackOptions.output中的配置相似
// 即可以通過在名字前加路徑朱监，來決定打包后的文件存在的路徑
filename: devMode ? 'css/[name].css' : 'css/[name].[hash].css',
chunkFilename: devMode ? 'css/[id].css' : 'css/[id].[hash].css',
})
]
3. webpack如何打包多個CSS文件到一個css文件中
如何用webpack將css合并打包成一個單獨的css，或者將css中同樣的模塊獨立出來呢暖哨？extract-text-webpack-plugin可以將所有 required 的 *.css 模塊抽取到一個單獨的 CSS 文件赌朋。 所以你的樣式將不會內(nèi)聯(lián)到 JS bundle，而是在一個單獨的 CSS 文件篇裁。如果你的樣式文件很大沛慢，這樣會提速，因為 CSS bundle 和 JS bundle 是平行加載的达布。
(1).這個插件的安裝方法:
npm install extract-text-webpack-plugin --save-dev
(2).webpack.config.js 配置
const ExtractTextWebpackPlugin = require("extract-text-webpack-plugin");
module: {
rules: [
{
test: /\.css$/,
use : ExtractTextWebpackPlugin.extract({
use: [
{ loader: "css-loader" }
]
})
},
{
test: /\.less$/,
use : ExtractTextWebpackPlugin.extract({
use: [
{ loader: "css-loader" },
{ loader: "less-loader" }
]
})
}
]
},
plugins: [
new ExtractTextWebpackPlugin({
filename: "css/common.css"
}),
]
詳細配置可參考：extract-text-webpack-plugin
webpack處理圖片
1.最基本的打包圖片
圖片打包關(guān)鍵要用到file-loader或url-loader
file-loader和url-loader模塊是webpack打包中用到的一個loader团甲。
它實現(xiàn)的功能很簡單：
-將要加載的文件復(fù)制到指定目錄
-將請求文件的url從相對于原始文件修改為相對于入口html頁面
(1).安裝相應(yīng)的loader
//安裝file-loader
npm install --save-dev file-loader
//或者安裝url-loader
npm install --save-dev file-loader
其中url-loader與file-loader功能基本一致，只不過url-loader能將小于某個大小的圖片進行base64格式的轉(zhuǎn)化處理黍聂。
(2).在webpack.config.js中的rules數(shù)組中添加相關(guān)配置
//使用file-loader的相關(guān)配置
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpg|jpeg|jsp|gif)/,
use: [{
loader: 'file-loader',
options: {
name: '[name]_[hash].[ext]', //保持打包后的圖片名字和原來一樣
outputPath: 'images/'
}
}]
}
file-loader可以解析項目中的url引入（不僅限于css）躺苦，根據(jù)我們的配置，將圖片拷貝到相應(yīng)的路徑产还，再根據(jù)我們的配置匹厘，修改打包后文件引用路徑，使之指向正確的文件脐区。
file-loader的詳細配置請參考file-loader
除了使用file-loader對圖片進行打包處理外愈诚，我們同樣也可以使用url-loader代替，使用url-loader我們還可以對小于某個大小的圖片進行base64格式的轉(zhuǎn)化處理。
{
test: /\.(png|jpg|jpeg|jsp|gif)/,
use: [{
loader: 'url-loader',
options: {
limit: 40960,
name: '[name].[ext]', //保持打包后的圖片名字和原來一樣
outputPath: 'images/'
}
}]
}
這里limit屬性的作用就是將小于40960B（40K）大小的圖片轉(zhuǎn)成base64格式炕柔，而大于這個大小的圖片將會以file-loader的方式進行打包處理酌泰，例如圖片小于40k的時候：
如果圖片較多，會發(fā)很多http請求匕累，會降低頁面性能陵刹。這個問題可以通過url-loader解決。url-loader會將引入的圖片編碼欢嘿，生成dataURl衰琐。相當(dāng)于把圖片數(shù)據(jù)翻譯成一串字符。再把這串字符打包到文件中际插，最終只需要引入這個文件就能訪問圖片了碘耳。當(dāng)然，如果圖片較大框弛，編碼會消耗性能辛辨。因此url-loader提供了一個limit參數(shù)，小于limit字節(jié)的文件會被轉(zhuǎn)為DataURl瑟枫，大于limit的還會使用file-loader進行copy斗搞。
url-loader和file-loader是什么關(guān)系呢？簡答地說慷妙，url-loader封裝了file-loader僻焚。url-loader不依賴于file-loader，即使用url-loader時膝擂，只需要安裝url-loader即可虑啤，不需要安裝file-loader，因為url-loader內(nèi)置了file-loader架馋。通過上面的介紹狞山，我們可以看到，url-loader工作分兩種情況：1.文件大小小于limit參數(shù)叉寂，url-loader將會把文件轉(zhuǎn)為DataURL萍启；2.文件大小大于limit，url-loader會調(diào)用file-loader進行處理屏鳍，參數(shù)也會直接傳給file-loader勘纯。因此我們只需要安裝url-loader即可。
參考文章：webpack學(xué)習(xí)筆記--file-loader 和 url-loader
webpack 中進行圖片處理 file-loader img-loader url-loader
Webpack輕松入門—圖片打包
furl-loader的詳細配置請參考url-loader
2.webpack處理雪碧圖
之前使用雪碧圖需要用到ps去拼接然后手動寫樣式钓瞭。
例如頁面中經(jīng)常會需要一些圖標(biāo)驳遵。例如：
使用 webpack-spritesmith
插件之后,簡化了上述麻煩的步驟。我們只需要提供指定目錄下的一堆小圖片.它就能幫我們做如下的事情.
-把零散的小圖標(biāo)生成一張大圖.(多個http請求變成一個)
-測量大圖的中每一個小圖標(biāo)的大小以及位置,幫我們生成對應(yīng)的 .css 文件.(不用我們自己測量尺寸和位置以及編寫.css文件)
webpack-spritesmith的使用方法如下：
(1)安裝 webpack-spritesmith插件
npm install --save-dev webpack-spritesmith
(2).在 webpack.config.js 中導(dǎo)入此插件,并設(shè)置一些此插件的相關(guān)配置.
const WebpackSpritesmithPlugin = require('webpack-spritesmith');
// 雪碧圖插件
new WebpackSpritesmithPlugin({
// 目標(biāo)小圖標(biāo)
src: {
// 小圖標(biāo)路徑
cwd: path.join(__dirname, 'src/images/sprite'),
// 匹配小圖標(biāo)文件后綴名
glob: '*.png'
},
target: {
// 生成雪碧圖(大圖)文件存放路徑
image: path.join(__dirname, 'dist/images/sprites.png'),
// 對應(yīng)的樣式文件存放路徑
css: path.join(__dirname, 'dist/css/sprites.css')
},
// 打包的樣式文件中,調(diào)用雪碧圖的路徑
apiOptions: {
cssImageRef: '../images/sprites.png'
},
// 雪碧圖生成算法
spritesmithOptions: {
algorithm: 'binary-tree', // binary-tree,top-down從左到右和從上到下生成方向.
padding: 2 // 每個小圖標(biāo)之間的間隙
}
})
打包之后生成的頁面結(jié)構(gòu)如下：
幾張圖標(biāo)被拼成了一張完整的圖：
webpack-spritesmith的詳細使用方法可如下文章：
手把手教你webpack3（15）插件之雪碧圖插件（WEBPACK-SPRITESMITH配置簡述）
webpack 學(xué)習(xí)筆記之十, webpack-spritesmith 雪碧圖
webpack優(yōu)化實踐
1.webpack實現(xiàn)vue路由按需加載
webpack ensure相信大家都聽過山涡。有人稱它為異步加載超埋，也有人說做代碼切割搏讶，那這
個家伙到底是用來干嘛的佳鳖？其實說白了霍殴，它就是把js模塊給獨立導(dǎo)出一個.js文件的，然后使用這個模塊的時候系吩，webpack會構(gòu)造script dom元素来庭，由瀏覽器發(fā)起異步請求這個js文件。
語法如下：
require.ensure(dependencies: String[], callback: function(require), chunkName: String)
依賴 dependencies：這是一個字符串?dāng)?shù)組穿挨，通過這個參數(shù)月弛，在所有的回調(diào)函數(shù)的代碼被執(zhí)行前，我們可以將所有需要用到的模塊進行聲明科盛。
回調(diào) callback：當(dāng)所有的依賴都加載完成后帽衙，webpack會執(zhí)行這個回調(diào)函數(shù)。require 對象的一個實現(xiàn)會作為一個參數(shù)傳遞給這個回調(diào)函數(shù)贞绵。因此厉萝，我們可以進一步 require() 依賴和其它模塊提供下一步的執(zhí)行。
chunk名稱 chunkName：chunkName 是提供給這個特定的 require.ensure() 的 chunk 的名稱榨崩。通俗的說就是按需加載引入的那個js的文件名谴垫。需要文件名的時候需要對wenpack的output的chunkFilename和publicPath兩個屬性進行配置。
（1）將組件(頁面)引入
傳統(tǒng)的與引入方式為：
import List from '@/components/List'
這里需要修改為：
const List = r => require.ensure([], () => r(require('@/components/List')), 'List')
路由還按以前的方式寫：
export default new Router({
routes: [{
path: '/',
name: 'index',
component: Index
},
{
path: '/list',
name: 'List',
component: List
}
]
})
詳細的使用請參考文章：
三種方式分割VueJS及Webpack代碼
vue按需加載組件-webpack require.ensure
