簡(jiǎn)單使用webpack打包文件的實(shí)現(xiàn)
沒(méi)有安裝node的同學(xué)請(qǐng)先安裝node。
安裝
npm i -g webpack
編寫配置文件
假設(shè)我們有兩個(gè)js文件需要打包,1.js和mode1.js,我們?cè)?.js里面引入mode1.js模塊
mode1.js 模塊:
export default { sum(...arg){ let s=0; arg.forEach(item=>{ s+=item; }); return s } }
一個(gè)簡(jiǎn)單的求和函數(shù),default的意思是把整個(gè)模塊都暴露出去
1.js:
import common from './mode1' window.onload=function(){ document.onclick=function(){ alert(common.sum(12,43,65,8,7,98)) } }
其中的common是自己命名的
我們把1.js作為入口文件編寫webpack配置文件,對(duì)webpack的操作都在這個(gè)配置文件里面寫,默認(rèn)名字webpack.config.js
webpack.config.js:
const pathlib = require('path'); module.exports = { entry: { index:'./src/1', ym:'./src/2' }, output: { path: pathlib.resolve('dest/'), filename: '[name].bundle.js' } }
這里面有兩個(gè)核心參數(shù)entry和output入口和出口,入口可以是多入口,如果寫成多入口就寫成json文件,出口的path選項(xiàng)是配置輸出的文件路徑,必須是絕對(duì)路徑,所以這里引了path模塊,filename是輸出文件的名字,[name].是占位符,輸出多文件入口的時(shí)候用到、
編譯
最后在項(xiàng)目目錄執(zhí)行 webpack 編譯命令就可以了
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)頁(yè)面鼠標(biāo)點(diǎn)擊出現(xiàn)圖片特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)頁(yè)面鼠標(biāo)點(diǎn)擊出現(xiàn)圖片特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08JavaScript頁(yè)面模板庫(kù)handlebars的簡(jiǎn)單用法
本文主要是給大家分享的一個(gè)javascript頁(yè)面模板庫(kù)Handlebars的簡(jiǎn)單用法,可以幫助大家輕松的構(gòu)建語(yǔ)義化模板,非常的實(shí)用,推薦給大家。2015-03-03JavaScript基本語(yǔ)法_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了JavaScript基本語(yǔ)法,適合剛?cè)腴T的同學(xué),有興趣的可以了解下。2017-06-06一個(gè)JavaScript用逗號(hào)分割字符串實(shí)例
分割字符串的方法有很多,這篇文章主要介紹了一個(gè)JavaScript用逗號(hào)分割字符串實(shí)例,需要的朋友可以參考下2014-09-09一個(gè)簡(jiǎn)單的全屏圖片上下打開顯示網(wǎng)頁(yè)效果示例
這是一個(gè)簡(jiǎn)單的全屏圖片上下打開顯示網(wǎng)頁(yè)效果,源碼如下,喜歡的朋友可以練練手2014-07-07