如何完美配置Webpack4.x.x以及打包运行测试

背景

第一次使用Webpack4还不大熟悉，导致测试项目时老是失败。所以找了资料，以下内容参考自 EddyWorkHard ，对其内容进行整理加总结，大家可以参考参考。

注：以下部分npm命令都改用为cnpm，未配置请点击我查看。

1.安装webpack

打开cmd，执行以下命令：

cnpm install webpack -g

2.安装webpack-cli（必装）

安装完后继续输入以下命令：

cnpm install webpack-cli -g

然后输入以下命令查看版本（没显示即安装失败）：

webpack -v

3.配置全局package.json

打开你node的安装位置\node-global\node_modules\webpack，找到并打开package.json，添加以下字段：

"scripts": {
    "dev": "./node_modules/.bin/webpack --mode development",
    "build": "./node_modules/.bin/webpack  --mode product",
    "des": "./node_modules/.bin/webpack-dev-server"
}

注：原作者并没有注明把这些字段加在全局package.json还是局部package.json，我自行把它加载到全局package.json能正常使用，查阅原文后我猜作者应该放在局部package.json，也就是项目下的package.json文件，这里大家可以尝试看看。另外，以上代码的scripts字段在package.json是已经存在的，添加时直接把里面三行直接添至末尾，如下图：

4.创建项目并打包测试

打开你的项目文件夹，在空白处按住shift+鼠标右键，找到并打开  在此处打开Powershell窗口，输入以下命令：

npm init -y

此时在文件夹中可以看到package.json文件，Powershell并显示package.json文件内容如图：

然后再输入以下命令：

vue init webpack test

注：执行以上命令时请自行安装好vue和vue-cli，否则运行不了。

下载模板后，会跳出选项，前四项直接回车，后面选项直接输入n后回车，如图：

创建完毕后打开test文件夹，你就会发现项目文件夹下生成好多文件，这时才能看到node_modules文件夹。

打开test文件夹，在空白处按住shift+鼠标右键，找到并打开  在此处打开Powershell窗口，输入以下命令安装依赖：

cnpm install

安装完后，再执行以下命令：

npm run dev

等待打包完毕后，会跳出以下信息：

这就表明打包成功啦！复制以上链接到浏览器运行即可查看初始化后的vue项目。

整个流程看似麻烦，但是还是很轻松的。如果有哪里写的不明白，欢迎下方留言哦！