簡單使用webpack打包文件的實現(xiàn)
沒有安裝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的操作都在這個配置文件里面寫,默認名字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選項是配置輸出的文件路徑,必須是絕對路徑,所以這里引了path模塊,filename是輸出文件的名字,[name].是占位符,輸出多文件入口的時候用到、
編譯
最后在項目目錄執(zhí)行 webpack 編譯命令就可以了
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript頁面模板庫handlebars的簡單用法
本文主要是給大家分享的一個javascript頁面模板庫Handlebars的簡單用法,可以幫助大家輕松的構(gòu)建語義化模板,非常的實用,推薦給大家。2015-03-03JavaScript基本語法_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了JavaScript基本語法,適合剛?cè)腴T的同學(xué),有興趣的可以了解下。2017-06-06