溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

簡單使用webpack打包文件的實(shí)現(xiàn)

發(fā)布時(shí)間：2020-09-07 21:57:05 來源：腳本之家 閱讀：164 作者：逸軒 欄目：web開發(fā)

沒有安裝node的同學(xué)請(qǐng)先安裝node。

安裝

npm i -g webpack

編寫配置文件

假設(shè)我們有兩個(gè)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
  }
}

一個(gè)簡單的求和函數(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 編譯命令就可以了

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(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)容。

AI
助
手