Question

我正在一个vue.js项目中启用了webpack和热重加载，并且在没有对webpack配置进行任何更改的情况下，webpack突然引发错误：

module.js:442
    throw err;
    ^

Error: Cannot find module './options'
    at Function.Module._resolveFilename (module.js:440:15)
    at Function.Module._load (module.js:388:25)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/Django/canvas/node_modules/.bin/webpack-dev-server:28:17)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)

npm ERR! Darwin 18.0.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/bin/npm-cli.js" "run" "dev" "--scripts-prepend-node-path=auto"
npm ERR! node v6.2.2
npm ERR! npm  v3.10.6
npm ERR! code ELIFECYCLE
npm ERR! canvas@0.2.0 dev: `webpack-dev-server --config webpack.config.dev.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the canvas@0.2.0 dev script 'webpack-dev-server --config webpack.config.dev.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the canvas package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack-dev-server --config webpack.config.dev.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs canvas
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls canvas
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/Django/canvas/npm-debug.log

webpack.config.dev.js看起来像这样，并且在错误发生之前/之后没有被触及：

'use strict'

const path = require("path")
const BundleTracker = require('webpack-bundle-tracker')
const webpack = require('webpack')
const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin  = require('mini-css-extract-plugin')

module.exports = {
  mode: 'development',
  entry: [
    './assets/js/index.js'
  ],
  output: {
    // path: path.resolve('./assets/bundles/'),
    filename: '[name]-[hash].js',
    publicPath: 'http://localhost:3000/assets/bundles/' // Tell django to use this URL to load packages and not use STATIC_URL + bundle_name
  },
  devServer: {
    contentBase: path.join(__dirname, 'assets/bundles'),
    compress: true,
    port: 3000,
    hot: true,
    watchOptions: {
      poll: true
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        use: 'eslint-loader',
        enforce: 'pre'
      },
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader?optional=runtime&cacheDirectory',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, // extracts css from vue code
          'css-loader'
        ]
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1 --> allows standalone build instead of preferred runtime-only
    }
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin(),
    new BundleTracker({ filename: './webpack-stats.json' }),
    new MiniCssExtractPlugin({
      filename: 'main.css'
    })
  ]
}

昨天晚上，我确实安装了vue-font-awesome，发现在package.json中，npm，i和install有新的依赖项。

我该如何解决？

为什么webpack会在webpack-dev-server中引发突然错误？

0 个答案: