詳解如何使用webpack打包多頁jquery項(xiàng)目
雖然已經(jīng)2019年了
不過有一些項(xiàng)目
還是需要用到j(luò)query的
不過考慮到使用jquery的一堆兼容性問題
也為了可以順利地使用ES6來擼代碼
研究使用webpack+babel打包代碼來發(fā)布
幾個重點(diǎn)：
1.為了將模塊分割加載，不至于一個js文件過大，一個頁面中使用多個js文件
2.由于是多頁項(xiàng)目（多個html），每個頁面使用的js文件都不一致
基于以上兩點(diǎn)，需要配置多個入口文件
3.會把小圖片轉(zhuǎn)換成base64，所以可能css轉(zhuǎn)成的js文件會比較大，所以css文件都單獨(dú)設(shè)置入口js
例如，我們有三個頁面：index、share、assist
三個頁面有通用的css文件：common.css
設(shè)置入口文件時，可以這樣設(shè)置
entry: {
// 通用css
commoncss: path.resolve(__dirname, './src/css/common.css.js'),
// 主頁
indexcss: path.resolve(__dirname, './src/css/index.css.js'),
index: path.resolve(__dirname, './src/index.js'),
// 頁1
sharecss: path.resolve(__dirname, './src/css/share.css.js'),
share: path.resolve(__dirname, './src/share.js'),
// 頁2
assistcss: path.resolve(__dirname, './src/css/assist.css.js'),
assist: path.resolve(__dirname, './src/assist.js'),
}
其中，common.css.js文件中，只有幾行代碼
import '../css/base.css'; import '../css/plugin.css'; import '../css/common.css';
common.css.js文件結(jié)束
由于會有一些圖片的base64，所以大小大約100+KB
類似的還有index.css.js和share.css.js和assist.css.js
index.css.js如下
import '../css/index.css';
對，就一句話
打包出來的js文件大小就看引入了多少小圖片了，一般幾百KB
然后，要使用三個webpack的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const jquery = require('jquery');
HtmlWebpackPlugin 用于打包出多個html文件
CopyWebpackPlugin 用于img標(biāo)簽，后面說
jquery 就是jquery，全局引用
webpack.config.js里的plugins配置如下
plugins: [
new webpack.ProvidePlugin({
$:"jquery"
}),
new CopyWebpackPlugin([{
from: __dirname + '/src/public/'
}]), // 吧src下public文件夾下的所有內(nèi)容直接拷貝到dist(輸出目錄)下
new HtmlWebpackPlugin({
filename: 'index.htm',
template: 'src/index.html',
chunks: ['commoncss', 'indexcss', 'index'],
inject: 'true',
hash: true,
}),
new HtmlWebpackPlugin({
filename: 'share.htm',
template: 'src/share.html',
chunks: ['commoncss', 'sharecss', 'share'],
inject: 'true',
hash: true,
}),
new HtmlWebpackPlugin({
filename: 'assist.htm',
template: 'src/assist.html',
chunks: ['commoncss', 'assistcss', 'assist'],
inject: 'true',
hash: true,
})
]
src目錄下的文件如下
index.js assist.js share.js是三個文件分別的入口文件
index.html assist.html share.html是三個文件的模板，html代碼可以寫在這里（當(dāng)然想用模板文件也是可以的，只要HtmlWebpackPlugin插件支持）
dist文件夾如下
（為什么是htm而不是html，是為了便于讀者區(qū)分模板文件和輸出文件）
我們知道，webpack打包不會打包HtmlWebpackPlugin的template里的img標(biāo)簽下的圖片，所以在html里使用了img標(biāo)簽的圖片都要放在public文件夾下，CopyWebpackPlugin這個組件會直接把圖片復(fù)制過去
關(guān)于HtmlWebpackPlugin的具體參數(shù)的細(xì)則可以上網(wǎng)搜一下，很多這方面的內(nèi)容
其他的比如loader、babel不在這篇文章想說的重點(diǎn)之列，不贅述
最后，附上webpack.config.js文件
let actName = 'yourProjectName';//
let actKV = {
name: actName,
entry: {
// 通用css
commoncss: path.resolve(__dirname, './src/css/common.css.js'),
// 主頁
indexcss: path.resolve(__dirname, './src/css/index.css.js'),
index: path.resolve(__dirname, './src/index.js'),
// 分享頁1
sharecss: path.resolve(__dirname, './src/css/share.css.js'),
share: path.resolve(__dirname, './src/share.js'),
// 分享頁2
assistcss: path.resolve(__dirname, './src/css/assist.css.js'),
assist: path.resolve(__dirname, './src/assist.js'),
}
};
return {
entry: actKV.entry,
target: "web",
output: {
path: path.resolve(__dirname + '/dist/'+actName),
// publicPath: '.\\',
filename: 'js/[name].js',
// chunkFilename: "[name].chunk.[hash].js",
},
plugins: [
new webpack.ProvidePlugin({
$:"jquery"
}),
new CopyWebpackPlugin([{
from: __dirname + '/src/public/'
}]),
new HtmlWebpackPlugin({
filename: 'index.htm',
template: 'src/index.html',
chunks: ['commoncss', 'indexcss', 'index'],
inject: 'true',
hash: true,
}),
new HtmlWebpackPlugin({
filename: 'share.htm',
template: 'src/share.html',
chunks: ['commoncss', 'sharecss', 'share'],
inject: 'true',
hash: true,
}),
new HtmlWebpackPlugin({
filename: 'assist.htm',
template: 'src/assist.html',
chunks: ['commoncss', 'assistcss', 'assist'],
inject: 'true',
hash: true,
})
],
mode: 'development',
node: {
__filename: true,
__dirname: true
},
devtool: isProduction ? 'source-map':'inline-source-map',
devServer:{
inline: true,
open: true,
historyApiFallback: true,
// host: ip.address(),
host: 'localhost',
progress: true,
contentBase: "./dist/",
port: 3430,
historyApiFallback:true,
publicPath:'/src/',
proxy: {
'*': {
target: 'http://127.0.0.1:3430',
secure: false
}
},
},
resolve: {
alias: {
},
extensions: ['.js', '.less', '.css', '.vue', '.jsx'],
},
externals: {
},
module: {
rules: [{
test: /\.vue$/,
loader: 'vue-loader',
}, {
test: /\.js$/,
include: path.join(__dirname,'/src'),
exclude: path.resolve(__dirname, 'node_modules'),
use:[
{
loader: 'babel-loader',
query: {
presets: ['es2015']
}
}
]
}, {
test: /\.xml$/,
loader: "xml-loader"
}, {
test: /\.(css|less)$/,
loader: "style-loader!css-loader",
},
{
test: /\.(png|jpg|jpeg|gif|icon|webp)$/,
loader: 'url-loader',
options: {
limit: 16384,
name: 'images/[name].[hash:5].[ext]',
}
},
{
test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
loader: "file-loader?&name=assets/fonts/[name].[ext]"
}, {
test: /\.txt$/,
loader: "text-loader"
},{
test: /\.jsx$/,
exclude: /node_modules/,
loaders: ['jsx-loader', 'babel-loader']
}]
},
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了淺談javascript事件取消和阻止冒泡的方法和示例，有需要的小伙伴可以參考下。2015-05-05
使用JS實(shí)現(xiàn)一個功能豐富的待辦事項(xiàng)應(yīng)用
在日常工作和生活中,我們經(jīng)常需要處理各種各樣的待辦事項(xiàng),這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)一個功能豐富的待辦事項(xiàng)應(yīng)用,需要的可以了解下2024-01-01
JS中call()和apply()的功能及用法實(shí)例分析
這篇文章主要介紹了JS中call()和apply()的功能及用法,結(jié)合實(shí)例形式詳細(xì)分析了JS中call()和apply()的功能、區(qū)別、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2019-06-06
這篇文章主要介紹了JS正則子匹配用法,結(jié)合簡單實(shí)例形式分析了js正則字匹配的概念、用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12
這篇文章主要為大家詳細(xì)介紹了js canvas實(shí)現(xiàn)俄羅斯方塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了Javascript對象Clone用法,實(shí)例分析了javascript對象克隆的相關(guān)技巧,需要的朋友可以參考下2015-06-06
下面小編就為大家?guī)硪黄猨s在ie下打開對話窗口的方法小結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
js截取中英文字符串、標(biāo)點(diǎn)符號無亂碼示例解讀
這篇文章主要介紹了如何js截取中英文字符串、標(biāo)點(diǎn)符號無亂碼,需要的朋友可以參考下2014-04-04
Express無法通過req.body獲取請求傳遞的數(shù)據(jù)解決方法
這篇文章主要為大家介紹了Express無法通過req.body獲取請求傳遞的數(shù)據(jù)解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要為大家詳細(xì)介紹了純css下拉菜單代碼，無需js，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08