jquery的多頁項目，不需要安裝依賴，開發階段也不需要啟動本地服務器，直接在瀏覽器打開，很多情況下用jquery開發還是很方便很快捷的；也會有一些痛點，比如瀏覽器緩存問題，更新了圖片，css或js后，如果引入路徑或文件名稱不變的話，用戶訪問的資源可能還是從瀏覽器緩存獲取的舊資源，手動維護文件名稱或引入路徑又很麻煩，這就需要引入webpack了
webpack4 安裝依賴
package.json
"devDependencies": {
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.4.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^5.0.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^1.1.2",
"url-loader": "^3.0.0",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
}
多入口
多個頁面，就有多個入口，除非有些共性很大的頁面可以用同一個入口
entry: {
index: "./entry/index.js",
list: "./entry/list.js",
item: "./entry/item.js"
}
用HtmlWebpackPlugin插件自動生成頁面（注：item1.html和item2.html的css和js都相同，使用的是同一個入口item）
plugins: [
new HtmlWebpackPlugin({
chunks: ['index', 'common'],
template: './src/index.html',
filename: 'index.html'
}),
new HtmlWebpackPlugin({
chunks: ['list', 'common'],
template: './src/list.html',
filename: 'list.html'
}),
new HtmlWebpackPlugin({
chunks: ['item', 'common'],
template: './src/item1.html',
filename: 'item2.html'
}),
new HtmlWebpackPlugin({
chunks: ['item', 'common'],
template: './src/item2.html',
filename: 'item2.html'
})
]
jquery項目的資源分類
首先先對項目的資源進行一個分類，不同的種類采用不同的處理方式
- css和js
- 第三方庫的css和js
- 多個頁面公共的css和js
- 單個頁面的css和js
- 圖片
- css中的圖片
- html中的圖片（img標簽的src，img標簽的data-src等等）
- 字體文件
種類分析：
【第三方庫的css和js】和【字體文件】：這類資源是不會經常改變的，在html的head引入，用CopyWebpackPlugin插件將資源拷貝到最終的目錄
new CopyWebpackPlugin([
{
from: path.join(__dirname, './src/js'),
to: path.join(__dirname, './dist/js')
},
{
from: path.join(__dirname, './src/css'),
to: path.join(__dirname, './dist/css')
}
])
【多個頁面公共的css和js】：這類資源是會變的，直接拷貝會有緩存問題，又因為是公共的，提取出來可以減少頁面的重復請求，在入口文件里引入，並用webpack.optimization.splitChunks提取公共部分
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
common: {
name: 'common',
minChunks: 2 //最少被2個chunk引用
}
}
}
}
【單個頁面的css和js】：在入口文件里引入
// entry/index.js
import '../src/css/reset.css'
import '../src/css/common.css'
import '../src/css/index.css'
import '../src/css/media.css'
import common from '../src/js/common.import';
common()
【css中的圖片】：可直接通過url-loader處理
{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
use: [
{
loader: 'url-loader',
options: {
name: 'img/[name].[hash:8].[ext]', // 輸出文件名稱
limit: 1024, // 小於limit則轉為base64
esModule: false, // 禁用esModule, 解決html中img標簽的src不正確的問題
publicPath: 'http://example.com/' // 項目線上的地址，這里建議用絕對地址，相對地址會在html文件目錄結構復雜時出現圖片路徑問題, 本地開發為http://localhost:8080/
}
}
]
}
【html中的圖片】：對於HtmlWebpackPlugin插件生成的html文件，url-laoder不能直接處理img標簽引用的圖片，需要用html-laoder處理html文件
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
attrs: [':data-src', 'img:src'], // 處理所有data-src屬性對應的圖片，img標簽的src屬性對應圖片
interpolate: 'require' // 啟用插值語法，html模版中可以使用require來引入圖片，html組件等等
}
}
]
}
提取css文件
css文件默認是打包在js文件內的，建議提取css文件，從head標簽引入
plugins: [
new ExtractTextPlugin("build/[name].[hash:8].css")
]
本地開發
package.json
{
"scripts": {
"dev": "webpack-dev-server"
}
}
npm run dev
默認端口為8080，訪問：http://localhost:8080
生產打包
package.json
{
"scripts": {
"build": "webpack"
}
}
npm run build
完整webpack.config.js
// webpack.config.js
var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: {
index: "./entry/index.js",
teacher: "./entry/teacher.js",
item: "./entry/item.js",
},
output: {
path: path.join(__dirname, './dist'),
filename: "build/[name].[hash:8].js"
},
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: {
attrs: [':data-src', 'img:src'], // 處理所有data-src屬性對應的圖片，img標簽的src屬性對應圖片
interpolate: 'require' // 啟用插值語法，html模版中可以使用require來引入圖片，html組件等等
}
}
]
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
use: [
{
loader: 'url-loader',
options: {
name: 'img/[name].[hash:8].[ext]', // 輸出文件名稱
limit: 1024, // 小於limit則轉為base64
esModule: false, // 禁用esModule, 解決html中img標簽的src不正確的問題
publicPath: 'http://example.com/' // 項目線上的地址，這里建議用絕對地址，相對地址會在html文件目錄結構復雜時出現圖片路徑問題, 本地開發為http://localhost:8080/
}
}
]
}
]
},
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
common: {
name: 'common',
minChunks: 2, //最少被2個chunk引用
}
}
}
},
plugins: [
new HtmlWebpackPlugin({
chunks: ['index', 'common'],
template: './src/index.html',
filename: 'index.html'
}),
new HtmlWebpackPlugin({
chunks: ['list', 'common'],
template: './src/list.html',
filename: 'list.html'
}),
new HtmlWebpackPlugin({
chunks: ['item', 'common'],
template: './src/item1.html',
filename: 'item2.html'
}),
new HtmlWebpackPlugin({
chunks: ['item', 'common'],
template: './src/item2.html',
filename: 'item2.html'
}),
new CopyWebpackPlugin([
{
from: path.join(__dirname, './src/js'),
to: path.join(__dirname, './dist/js')
},
{
from: path.join(__dirname, './src/css'),
to: path.join(__dirname, './dist/css')
}
]),
new ExtractTextPlugin("build/[name].[hash:8].css")
]
};