簡單使用webpack打包文件的實(shí)現(xiàn)
更新時間：2019年10月29日 09:10:12 作者：逸軒
這篇文章主要介紹了簡單使用webpack打包文件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
沒有安裝node的同學(xué)請先安裝node。
安裝
npm i -g webpack
編寫配置文件
假設(shè)我們有兩個js文件需要打包，1.js和mode1.js，我們在1.js里面引入mode1.js模塊
mode1.js 模塊：
export default {
sum(...arg){
let s=0;
arg.forEach(item=>{
s+=item;
});
return s
}
}
一個簡單的求和函數(shù)，default的意思是把整個模塊都暴露出去
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配置文件，對webpack的操作都在這個配置文件里面寫，默認(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'
}
}
這里面有兩個核心參數(shù)entry和output入口和出口，入口可以是多入口，如果寫成多入口就寫成json文件，出口的path選項(xiàng)是配置輸出的文件路徑，必須是絕對路徑，所以這里引了path模塊，filename是輸出文件的名字，[name].是占位符，輸出多文件入口的時候用到、
編譯
最后在項(xiàng)目目錄執(zhí)行 webpack 編譯命令就可以了
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript一文帶你玩轉(zhuǎn)web表單網(wǎng)頁
表單通常用來收集網(wǎng)頁訪問者信息，常見的表單比如搜索引擎的搜索框、各網(wǎng)頁應(yīng)用的注冊或者登陸界面等，通讀本篇對大家的學(xué)習(xí)或工作具有一定的價(jià)值，需要的朋友可以參考下2021-10-10
彪哥1.1(智能表格)提供下載...2006-09-09
這篇文章主要介紹了js根據(jù)后綴判斷文件文件類型的代碼，原來是獲取文件的擴(kuò)展名然后再判斷屬于什么類型，對于圖片多個后綴的判斷的實(shí)現(xiàn)也不是不錯的思路，大家可以參考一下2020-05-05
本篇文章主要是對解決jquery插件沖突的方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
javascript實(shí)現(xiàn)非常簡單的小數(shù)取整功能示例
這篇文章主要介紹了javascript實(shí)現(xiàn)非常簡單的小數(shù)取整功能,結(jié)合具體實(shí)例形式分析了javascript數(shù)學(xué)運(yùn)算取整相關(guān)操作技巧,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了JS立即執(zhí)行函數(shù)功能與用法,結(jié)合實(shí)例形式分析了立即執(zhí)行函數(shù)的相關(guān)概念、定義、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2019-01-01
uniapp項(xiàng)目實(shí)踐自定義分享組件示例
這篇文章主要為大家介紹了uniapp項(xiàng)目實(shí)踐自定義分享組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09
Ext JS動態(tài)加載JavaScript創(chuàng)建窗體的方法
這篇文章主要介紹了Ext JS動態(tài)加載JavaScript創(chuàng)建窗體的方法 ,需要的朋友可以參考下2016-06-06
js中一個函數(shù)獲取另一個函數(shù)返回值問題探討
在本文將為大家詳細(xì)探討下js中一個函數(shù)獲取另一個函數(shù)返回值問題，比較模糊的朋友可以學(xué)習(xí)下哦2013-11-11
在iFrame子頁面里實(shí)現(xiàn)模態(tài)框的方法
今天小編就為大家分享一篇在iFrame子頁面里實(shí)現(xiàn)模態(tài)框的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08