这贴记录一下关于 webpack 打包遇到的 bug，及解决方案

因为之前着手做个几个小项目，需要到的 node 版本不一，所以安装了 nvm 以用来切换，但在这 webpack 打包时遇到很多小问题，着实耗费了大量时间，想给大家避避坑。

贴一下之前的错误报告：

Error: EINVAL: invalid argument, mkdir ‘C:\remaining\‪C:\nvm\nodejs\node_global’

这问题是.npmrc 文件配置问题了，因为当时 webpack 采用的是局部安装，运行后报错，根据错误语句上网找了很多解决方案，绝大部分帖子都是建议重装上 node 官网重装，然后在配置.npmrc文件配置一下信息，就跟着博客照做，发现情景根本不适合此我这机子，最后不仅弄乱了前先配置好的环境变量，还把 npm 命令弄的无法正常使用。

排错老半天，最后把官网安装的 node 和之前配置的都删了，还原.npmrc 文件配置成默认信息就好，该 bug 解决。（差点想把 nvm 也卸了，全都清洗重装）

1
2
prefix=‪C:\nvm\nodejs\node_global
cache=C:\nvm\nodejs\node_cache

webpack : 无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次

这里我选择全局下载 3.X 版本的 webpack，最后根据我自身机子的情况设置了环境变量，告诉系统该插件位置在哪就好。

具体为：在系统变量的 path 中添加全局位置，在新建一个 NODE_PATH 变量用来存放该位置下的 node_modules 值，最后再在自身变量的 path 中添加全局位置。

在这里插入图片描述

在这里插入图片描述

npm WARN webpack-cli@3.3.12 requires a peer of webpack@4.x.x but none is installed. You must install peer dependencies yourself.

这问就是版本问题了，在这项目我是指定了 3.5.5 的版本安装，前面还有个小插曲，之前我的 webpack-cli 默认转最新版的导致 webpack 也安装出错，在这也给他降低版本就行。

Insufficient number of arguments or no entry found.
Alternatively, run ‘webpack(-cli) –help’ for usage info.

这里把之前的 webpack.config.js 文件内容

1
2
3
module.exports = {
  mode: 'development',
}

改为：

1
2
3
4
5
6
7
8
9
10
11
const path = require('path')
module.exports = {
  //入口文件
  entry: path.join(__dirname, './src/index.js'),
  //出口文件
  output: {
    path: path.join(__dirname, './dist'),
    //指定输出文件的名称
    filename: 'index.js',
  },
}

在这里插入图片描述
另外，在打包 css、less、图片，安装的插件时容易出现版本不兼容的错误，建议使用一下版本号：
在这里插入图片描述在打包 vue 项目文件时，也容易产生 bug , 主要是路径和版本号问题 ，排错时优先考虑。