express搭建的nodejs項目使用webpack進行壓縮打包

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

對于打包這個問題它并不是難點,但是對于我們這種初學者來說,根本就不知道應該怎么做,下面這篇文章主要給大家介紹了關于express搭建的nodejs項目使用webpack進行壓縮打包的相關資料,需要的朋友可以參考下

背景：本文記錄使用express搭建nodejs后臺接口服務，為了能放到服務器上面，需要對項目進行壓縮打包，使用了webpack5，記錄過程和問題。

項目結構比較簡單，入口是app.js。

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

pnpm i webpack webpack-cli --save-dev

安裝完成后，在項目根目錄下創(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個點需要注意。

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

第二個是直接使用 __filename，在打包時會報錯，報錯信息如下：

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

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

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

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

之后就可以正常打包了，且在服務端正常運行。

總結

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

您可能感興趣的文章: