vue-cli2升级webpack4记录

最新推荐文章于 2025-05-27 09:36:02 发布

原创

最新推荐文章于 2025-05-27 09:36:02 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

目录结构分析，找出配置文件

这个项目是由vue-cli2生成的，我们先来看看现有的目录结果，找出我们需要改代码的地方，打开各文件查看，找到我们需要修改文件的地方存于放build和config两个目录下：

这次我们修改的js文件主要有以下三个：

./build/webpack.dev.conf.js
./build/webpack.prod.conf.js
./config/webpack.prod.conf

在package.json中查找编译命令

{
  "name": "laimi-backend",
  "version": "1.0.2",
  "description": "a project of laimi backend with Vue.js",
  "scripts": {
    "start": "npm run dev",
    "lint": "eslint --ext .js,.vue src",
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js"
  },
...
}

每个项目的根目录下，一般都有一个package.json文件，定义了这个项目需要的各种模块，以及项目的配置信息，scripts指定了运行脚本命令的npm命令行缩写，从这个文件中，我们找到了测试环境本地服务启动命令：

npm run start

生产环境编译命令：

npm run build

升级测试环境

安装webpack和webpack-cli至最新版

在webpack3中，webpack本身和它的cli以前都在同一个包中，但在第4版中，它们两者已经分开，所以我们的webpack需要安装两个包:

全局安装webpack至最新版

npm install webpack@4.23.1 -g

安装完成后出现版本号提示，说明安装成功，warning可以忽略，error表现没有安装成功，请重新再试。

本地升级webpack至最新版

npm install webpack@4.23.1 --save-dev

全局安装webpack-cli

npm install webpack-cli -g

全局安装完成后，还需要在本地服务中安装

 npm install webpack-cli --save-dev

如果未在本地安装webpack-cli启动服务会出现如下错误：

laimi-backend@1.0.2 dev E:\work\laimi-front\laimi-bk
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

The CLI moved into a separate package: webpack-cli
Pl