webpack基础-安装、配置、基本使用

tq040626

已于 2024-06-28 00:16:05 修改

阅读量95

点赞数 3

分类专栏： #vue2学习文章标签： webpack 前端 node.js

于 2024-06-27 16:10:22 首次发布

本文链接：https://blog.csdn.net/tq040626/article/details/140015495

版权

#vue2学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、在项目中安装webpack

在终端运行如下命令，安装webpack相关的两个包：

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

注：

//项目在开发和上线阶段都需要 -S
 "dependencies": {
    "jquery": "^3.7.1"
  },
//项目只在开发阶段 -D
  "devDependencies": {
    "webpack": "^5.42.1",
    "webpack-cli": "^4.7.2"
  }

2、在项目中配置webpack

（1）在项目根目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下：

//使用Node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
    //代表webpack运行模式，可选值有两个development和production
    //开发时选择development，上线时使用production
    mode: 'development'
}

（2）在package.json的scripts节点下，新增dev脚本如下：

  "scripts": {
    "dev":"webpack" //scripts节点下的脚本，可通过npm run 执行,例如npm run dev
  },

（3）在终端中运行npm run dev 命令，启动webpack进行项目的打包构建

PS D:\Study\code\高校分析\my-project\day1\change-rows-color> npm run dev

> change-rows-color@1.0.0 dev
> webpack

node:internal/crypto/hash:68
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:68:19)
    at Object.createHash (node:crypto:138:10)
    at BulkUpdateDecorator.hashFactory (D:\Study\code\高校分析\my-project\day1\change-rows-color\node_modules\webpack\lib\util\createHash.js:145:18)
    at BulkUpdateDecorator.update (D:\Study\code\高校分析\my-project\day1\change-rows-color\node_modules\webpack\lib\util\createHash.js:46:50)
    at RawSource.updateHash (D:\Study\code\高校分析\my-project\day1\change-rows-color\node_modules\webpack-sources\lib\RawSource.js:64:8)
    at NormalModule._initBuildHash (D:\Study\code\高校分析\my-project\day1\change-rows-color\node_modules\webpack\lib\NormalModule.js:868:17)
    at handleParseResult (D:\Study\code\高校分析\my-project\day1\change-rows-color\node_modules\webpack\lib\NormalModule.js:934:10)
    at D:\Study\code\高校分析\my-project\day1\change-rows-color\node_modules\webpack\lib\NormalModule.js:1026:4
    at processResult (D:\Study\code\高校分析\my-project\day1\change-rows-color\node_modules\webpack\lib\NormalModule.js:743:11)
    at D:\Study\code\高校分析\my-project\day1\change-rows-color\node_modules\webpack\lib\NormalModule.js:807:5 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v20.10.0

若运行时出现以上问题，请执行以下代码

PS D:\Study\code\高校分析\my-project\day1\change-rows-color> npm cache clean --force
npm warn using --force Recommended protections disabled.
PS D:\Study\code\高校分析\my-project\day1\change-rows-color> npm update

added 2 packages, removed 12 packages, and changed 21 packages in 12s

16 packages are looking for funding
  run `npm fund` for details
PS D:\Study\code\高校分析\my-project\day1\change-rows-color> npm run dev

3、webpack中的默认约定

（1）默认的打包入口文件为src ->index.js

（2）默认的输出文件路径为dist ->main.js

注：可以在webpack.config.js中修改打包的默认约定