當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

webpack打包js文件

發布時間：2024/4/13 编程问答 23 豆豆

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

Webpack安裝

全局安裝

npm install -g webpack webpack-cli

安裝后查看版本號

webpack -v

初始化項目

創建webpack文件夾

進入webpack目錄，執行命令

npm init -y

創建src文件夾

src下創建common.js

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

src下創建utils.js

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

src下創建main.js

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

JS打包

webpack目錄下創建配置文件webpack.config.js

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

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

命令行執行編譯命令

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

也可以配置項目的npm運行命令，修改package.json文件

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

運行npm命令執行打包

npm run dev

webpack目錄下創建index.html

引用bundle.js

瀏覽器中查看index.html

總結

以上是生活随笔為你收集整理的webpack打包js文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。