當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

webpack打包js文件

發(fā)布時(shí)間：2024/4/13 编程问答 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 webpack打包js文件小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

Webpack安裝

全局安裝

npm install -g webpack webpack-cli

安裝后查看版本號(hào)

webpack -v

初始化項(xiàng)目

創(chuàng)建webpack文件夾

進(jìn)入webpack目錄，執(zhí)行命令

npm init -y

創(chuàng)建src文件夾

src下創(chuàng)建common.js

exports.info = function (str) {document.write(str); }

src下創(chuàng)建utils.js

exports.add = function (a, b) {return a + b; }

src下創(chuàng)建main.js

const common = require('./common'); const utils = require('./utils');common.info('Hello world!' + utils.add(100, 200));

JS打包

webpack目錄下創(chuàng)建配置文件webpack.config.js

以下配置的意思是：讀取當(dāng)前項(xiàng)目目錄下src文件夾中的main.js（入口文件）內(nèi)容，分析資源依賴(lài)，把相關(guān)的js文件打包，打包后的文件放入當(dāng)前目錄的dist文件夾下，打包后的js文件名為bundle.js

const path = require("path"); //Node.js內(nèi)置模塊 module.exports = {entry: './src/main.js', //配置入口文件output: {path: path.resolve(__dirname, './dist'), //輸出路徑，__dirname：當(dāng)前文件所在路徑filename: 'bundle.js' //輸出文件} }

命令行執(zhí)行編譯命令

webpack #有黃色警告 webpack --mode=development #沒(méi)有警告 #執(zhí)行后查看bundle.js 里面包含了上面兩個(gè)js文件的內(nèi)容并驚醒了代碼壓縮

也可以配置項(xiàng)目的npm運(yùn)行命令，修改package.json文件

"scripts": {//...,"dev": "webpack --mode=development"}

運(yùn)行npm命令執(zhí)行打包

npm run dev

webpack目錄下創(chuàng)建index.html

引用bundle.js

瀏覽器中查看index.html

總結(jié)

以上是生活随笔為你收集整理的webpack打包js文件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。