快捷導(dǎo)航

express搭建的nodejs項(xiàng)目使用webpack進(jìn)行壓縮打包

更新時(shí)間：2022年12月27日 14:41:42 作者：木木茶壺

對(duì)于打包這個(gè)問題它并不是難點(diǎn),但是對(duì)于我們這種初學(xué)者來說,根本就不知道應(yīng)該怎么做,下面這篇文章主要給大家介紹了關(guān)于express搭建的nodejs項(xiàng)目使用webpack進(jìn)行壓縮打包的相關(guān)資料,需要的朋友可以參考下

背景：本文記錄使用express搭建nodejs后臺(tái)接口服務(wù)，為了能放到服務(wù)器上面，需要對(duì)項(xiàng)目進(jìn)行壓縮打包，使用了webpack5，記錄過程和問題。

項(xiàng)目結(jié)構(gòu)比較簡單，入口是app.js。

首先安裝webpack, webpack-cli, 這里直接安裝就是webpack5版本。

pnpm i webpack webpack-cli --save-dev

安裝完成后，在項(xiàng)目根目錄下創(chuàng)建webpack.config.js文件，編寫配置如下。

import path from 'path';
import { fileURLToPath } from 'url'
const __filenameNew = fileURLToPath(import.meta.url)
const __dirnameNew = path.dirname(__filenameNew)

export default {
  entry: './src/app.js',
  target:"node",
  output: {
    path: path.resolve(__dirnameNew, 'dist'),
    filename: 'bundle.js',
  },
};

這里面有3個(gè)點(diǎn)需要注意。

第一個(gè)我自己項(xiàng)目里面用的是esm規(guī)范, 也就 import 語法，為了使用這種規(guī)范，我在package.json里面配置了type: ‘module’, 屬性，因此在webpack配置里面沒有使用requir導(dǎo)入path。

第二個(gè)是直接使用 __filename，在打包時(shí)會(huì)報(bào)錯(cuò)，報(bào)錯(cuò)信息如下：

報(bào)錯(cuò)原因是因?yàn)閑sm規(guī)范里面不提供__filename, 而在commonjs規(guī)范里面有，但是我這里有些依賴導(dǎo)入原因只能用esm，因此我們需要用另外一種方法去導(dǎo)入__filename。解決如下：

import { fileURLToPath } from 'url'
const __filenameNew = fileURLToPath(import.meta.url)
const __dirnameNew = path.dirname(__filenameNew)

之后直接使用__dirnameNew來替代__dirname即可。

第三個(gè)是如果現(xiàn)在直接安裝webpack5官網(wǎng)的方法配置入口出口就進(jìn)行webpack打包，那么還是會(huì)報(bào)一堆錯(cuò)誤，這個(gè)原因是因?yàn)閑xpress包是運(yùn)行在服務(wù)器環(huán)境中的，而webpack打包默認(rèn)采用的是瀏覽器環(huán)境，需要在配置中增加target："node"這項(xiàng)配置，啟用服務(wù)器端編譯。

之后就可以正常打包了，且在服務(wù)端正常運(yùn)行。

總結(jié)

到此這篇關(guān)于express搭建的nodejs項(xiàng)目使用webpack進(jìn)行壓縮打包的文章就介紹到這了,更多相關(guān)express搭建nodejs項(xiàng)目打包內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: