運行webpack-dev-server報錯 Cannot find module 'webpack/schemas/WebpackOptions.json'

今天有空，就去梳理一下webpack的基礎知識和配置，然後找了一篇博文跟着步驟走，到‘使用webpack-dev-server’這一步時，運行npm start報錯：Cannot find module 'webpack/schemas/WebpackOptions.json'

博文教程：https://segmentfault.com/a/1190000010871559#articleHeader15

我的配置如下：

packge.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "webpack": "^3.4.1",
    "webpack-cli": "^2.1.4",
    "webpack-dev-server": "^3.1.4" //關鍵第一句
  },
  "dependencies": {
    "lodash": "^4.17.10"
  }
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
// const webpack = require('webpack');

module.exports = {
    devtool: 'inline-cheap-module-source-map',
    entry: {
        app: './src/index.js',
        print: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path:path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/,
                use: [
                    'file-loader'
                ]
            }
        ]
    },
    devServer:{
        contentBase: path.resolve(__dirname, 'dist'),//關鍵第二句
    },
    plugins: [
        new HtmlWebpackPlugin({
            title:'webpack demo',
            filename:'index.html'
        }),
        new CleanWebpackPlugin(['dist']),
    ]
}

開始網上的很多解決方案都不是我的問題所在，因爲我的webpack全局、局部都安裝好了。後來猜測：我的webpack版本是參照教程裏面安裝的3.4.1，而webpack-dev-server是默認安裝的最新的3.1.4，報錯說找不到WebpackOptions.json文件，有可能是版本不配套，現在webpack最新版本是4.9.1了，最新的webpack應該有WebpackOptions.json文件，所以，3.1.4的webpack-dev-server是跟4.X.X的webpack配套的，所以測試：

將webpack-dev-server降級：

npm uninstall webpack-dev-server

npm i --save-dev [email protected]

再運行命令：npm start

真的成功了！

所以我現在的package.json：

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.19",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.21.0",
    "webpack": "^3.4.1",
    "webpack-cli": "^2.1.4",
    "webpack-dev-server": "^2.9.7"
  },
  "dependencies": {
    "lodash": "^4.17.10"
  }
}

總結：這個錯誤網上搜索的結果，大部分是說因爲webpack沒局部安裝，或者start命令配置錯誤，而實際上我的報錯原因是，webpack和webpack-dev-server版本不配套導致，所以有時候報錯要能靜下來自己分析一下原因也是好的。另外，問題是解決了，要證明我的猜測完全正確，得下次安裝了webpack4，看看如果有WebpackOptions.json文件，那就猜對了，今天先接着把3弄完。