[Webpack 踩坑] 使用 Webpack 打包 Web 端和 Node 服务端通用的依赖库

最新推荐文章于 2024-07-23 10:56:05 发布

苍石

最新推荐文章于 2024-07-23 10:56:05 发布

阅读量2.1k

点赞数

分类专栏： Javascript NodeJS 前端文章标签： javascript nodejs webpack

本文链接：https://blog.csdn.net/palerock/article/details/109243512

版权

本文讲述了在将一个使用ES5语法的框架打包成NPM Package时遇到的问题，以及如何使用Webpack解决。作者在配置Webpack并打包后，发现打包的JS文件在Node服务端引用时出现问题。经过研究，作者发现需要设置Webpack的配置参数，包括output.libraryTarget和target，以确保在Web端和服务端都能正常工作。最后，作者提醒开发者要关注官方文档，特别是版本信息，以避免类似问题。

摘要由CSDN通过智能技术生成

引言

最近准备着手将大学时写的一个框架给规范化，想着将它部署成 NPM 上的一个 Package，但遇到了两个问题：

这个框架完全是由 ES5 语法规范搭建的，也没有考虑模块依赖什么的，它本身依赖的其它库都是纯代码复制到项目文件内容的上方，所以我们应该需要使用模块化来引用其依赖的框架，如 ES5 的 require
如果使用了 require 语法，那么意味着所有想使用该框架的项目都必须使用 NPM，该框架的单个文件并不能被 WEB 端直接引用。

考虑到以上两点，也许我应该像 JQuery 或其它框架一样将依赖一起打包在一个 JS 文件里，最好还能有个压缩后的 mini JS 文件，那么解决方案就呼之欲出了，对，使用 Webpack。

配置 Webpack 以及简单使用

由于项目只会使用到 Webpack 最基础最简单的打包功能，其配置也是相当的简单

安装: npm i webpack -D 和 npm i webpack-cli -D

在项目根目录新建 webpack.config.js 内容简单配置如下：

const path = require('path');

module.exports = {
     
    mode: 'none', // 如果想生成 mini JS 就配置为 production
    entry: './src/xxxx.js', // 配置想要打包的 JS 文件
    output: {
     
        filename: 'xxxx.js', // 打包后的文件名
        path: path.resolve(__dirname, "build"), // 打包后文件存放的目录
    }
}