webpack打包js文件的问题

最新推荐文章于 2023-06-21 13:50:50 发布

秋刀prince

最新推荐文章于 2023-06-21 13:50:50 发布

阅读量1.8k

点赞数

文章标签： nodejs vue

本文链接：https://blog.csdn.net/qq_39611212/article/details/119564036

版权

前言

这里记录下webpack打包js文件的配置和遇到的问题。因环境版本等不同，解决办法未必都是通用的，仅作为大家参考之用；

我的环境配置

macOS M1 系统
webpack版本：(全局版本）webpack 5.49.0，webpack-cli 4.7.2
node版本：v14.17.4
开发工具：webstorm

学习自建目录结构

在这里插入图片描述

dist目录下存放的是我们webpack打包后的最终js输出文件
node_modules 是我们安装项目本地的webpack后，目录自动生成的，全局和本地的webpack的区别简单的来说就是，由于我们开发中自己电脑上的webpack版本（全局）未必与公司开发的实际使用的版本相兼容匹配，所以我们可以通过安装指定的本地版本来打包我们的项目。
src目录下存放的就是我们的js源码文件，这里定义了一个主js文件，有来自calculate.js的依赖。
main.js:

const {sum, muti} = require('./calculate')  //导入依赖文件
console.log(sum(10, 20))
console.log(muti(14,20))

calculate.js:

function sum(num1, num2){
    return num1 + num2
}

function muti(num1, num2) {
    return num1 * num2
}
// 导出变量或方法方便外部引用
module.exports = {
    sum,muti
}

4、index.html是我们的测试页文件
index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack</title>
</head>
<body>
<!--这里只要引入我们最终打包生成的js文件即可，-->
<!--webpack会自动解决多个js中的依赖问题-->
<script src="./dist/bundle.js"></script>
</body>
</html>

5、package.json；是在npm init之后生成的文件，package.json文件会描述这个NPM包的所有相关信息，包括作者、简介、包依赖、构建等信息，格式是严格的JSON格式。
package.json:

{
  "name": "hbp",
  "version": "1.0.0",
  "description": "test",
  "main": "bundle.js",
  "scripts": {         //定义脚本
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"     //如build定义后，我们在终端上敲入npm run build即可进行webpakck的打包操作
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {    //此项在你安装了本地webpack之后会自动加上
    "webpack": "^3.6.0"
  }
}

6、package-lock.json：这个package-lock.json 是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号
7、webpack.config.js是主要的配置文件

出现的问题1：

在这里插入图片描述
出现module,require,exports等is not defined的情况下，我们首先确定我们的node环境是否正常，其次就是排除配置webpack.config.js中的这个配置：

libraryTarget: 'commonjs2'  //这个只针对node有效，浏览器是无效的，所以我们无需配置这个

正确配置如下：

// 引入path模块
const path = require('path')
// 项目打包导出的配置
module.exports = {
    entry:'./src/main.js',     --项目入口
    output:{     --输出文件路径
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'development'   -- 指定模式（参数分none,development,production三种)
}

原理可以参考：https://zhuanlan.zhihu.com/p/108216236

出现的问题2

我在测试时，没有指定mode的时候，报了如下错误：
在这里插入图片描述
解决：这个问题是在高版本的webpack中存在的，必须在打包的时候指定mode,在webpack.config.js文件中加入mode的配置即可；

还有一种方法就是如果你已经在package.json文件中配置了scripts,那么加入一个自定义的脚本，并输入执行命令语句webpack --mode production|none|development，然后终端执行npm run + 你定义的脚本代号；如：

在这里插入图片描述
tips: 需要注意的是，我们在终端中输入的webpack必然是用的全局的webpack版本，而我们定义了脚本，通过npm run的方式会先检查本地的webpack版本，没有再去找全局变量的。
配置官方文档说明参考：https://webpack.js.org/concepts/

秋刀prince

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack打包js文件的问题

前言这里记录下webpack打包js文件的配置和遇到的问题。因环境版本等不同，解决办法未必都是通用的，仅作为大家参考之用；我的环境配置macOS M1 系统webpack版本：(全局版本）webpack 5.49.0，webpack-cli 4.7.2node版本：v14.17.4开发工具：webstorm学习自建目录结构dist目录下存放的是我们webpack打包后的最终js输出文件node_modules 是我们安装项目本地的webpack后，目录自动生成的，全局和本地的webpa
复制链接

扫一扫