webpack 1.x升级过程中的踩坑总结大全

背景

随着webpack的不断更新，我们可能需要把以前的webpack 1.x项目升级到最新版本(webpack 4.x). 但是，升级过程中可能出现很多问题和错误，本文总结了一些常见的踩坑点和解决方法。

更新webpack版本

首先，我们需要更新webpack版本到4.x。webpack 1.x升级到webpack 2.x时，升级方法是逐个修改webpack配置文件；到webpack 3.x时，需要修改部分webpack配置参数。而webpack 4.x对webpack 3.x的升级来说变化比较大，需要对整个项目进行改动。

升级的方法如下：
1. 先升级webpack到最新版本。可以通过终端执行以下命令：

npm install --save-dev webpack webpack-cli

1. 然后把webpack配置文件重新调整到新版本的语法。我们可以使用官方迁移文档帮助我们完成迁移。

踩坑点及解决

1. webpack-dev-server无法启动

webpack-dev-server是一个非常方便的本地服务器，在开发环境中非常常见。但升级后可能无法启动，出现Error: Cannot find module 'webpack/lib/RequestShortener'错误。

解决方法：
在webpack-dev-server配置文件中加入一行：

const webpack = require('webpack');

然后在plugins中加入以下插件：

new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()

2. 历史遗留问题导致无法启动

在升级webpack的过程中，我们可能会遇到一些低版本webpack中的历史遗留问题，导致项目无法启动。

解决方法：
通过修改webpack配置文件解决。我们可以在webpack配置文件中添加resolve属性，用于指定模块解析的问题：

resolve: {
  modules: [
    path.join(__dirname, 'src'),
    'node_modules'
  ],
  alias: {
    '@': path.join(__dirname, 'src')
  }
}

这样webpack就会优先在src目录下查找模块。