您好,登錄后才能下訂單哦!
小編給大家分享一下使用webpack打包多頁jquery項(xiàng)目的案例,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
雖然已經(jīng)2019年了
不過有一些項(xiàng)目
還是需要用到j(luò)query的
不過考慮到使用jquery的一堆兼容性問題
也為了可以順利地使用ES6來擼代碼
研究使用webpack+babel打包代碼來發(fā)布
幾個(gè)重點(diǎn):
1.為了將模塊分割加載,不至于一個(gè)js文件過大,一個(gè)頁面中使用多個(gè)js文件
2.由于是多頁項(xiàng)目(多個(gè)html),每個(gè)頁面使用的js文件都不一致
基于以上兩點(diǎn),需要配置多個(gè)入口文件
3.會(huì)把小圖片轉(zhuǎn)換成base64,所以可能css轉(zhuǎn)成的js文件會(huì)比較大,所以css文件都單獨(dú)設(shè)置入口js
例如,我們有三個(gè)頁面:index、share、assist
三個(gè)頁面有通用的css文件:common.css
設(shè)置入口文件時(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é)束
由于會(huì)有一些圖片的base64,所以大小大約100+KB
類似的還有index.css.js和share.css.js和assist.css.js
index.css.js如下
import '../css/index.css';
對(duì),就一句話
打包出來的js文件大小就看引入了多少小圖片了,一般幾百KB
然后,要使用三個(gè)webpack的插件
const HtmlWebpackPlugin = require('html-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const jquery = require('jquery');
HtmlWebpackPlugin 用于打包出多個(gè)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是三個(gè)文件分別的入口文件
index.html assist.html share.html是三個(gè)文件的模板,html代碼可以寫在這里(當(dāng)然想用模板文件也是可以的,只要HtmlWebpackPlugin插件支持)
dist文件夾如下
(為什么是htm而不是html,是為了便于讀者區(qū)分模板文件和輸出文件)
我們知道,webpack打包不會(huì)打包HtmlWebpackPlugin的template里的img標(biāo)簽下的圖片,所以在html里使用了img標(biāo)簽的圖片都要放在public文件夾下,CopyWebpackPlugin這個(gè)組件會(huì)直接把圖片復(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'] }] }, }
看完了這篇文章,相信你對(duì)“使用webpack打包多頁jquery項(xiàng)目的案例”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。