Ошибка обновления страницы Webpack-dev-server, и она не может быть перегружена - PullRequest
Новая
       50

Ошибка обновления страницы Webpack-dev-server, и она не может быть перегружена

0 голосов
/ 23 апреля 2019

Изучая Vue, я думал о том, чтобы не полагаться на Vue-Cli и самостоятельно настраивать веб-пакет, но обнаружил много проблем.

  1. Я настроил hot module replacement (HMR) в соответствии с документами, но я обнаружил, что при изменении одностраничного файла vue не было горячей перегрузки, страница просто обновлялась.

  2. Я обнаружил, что могу толькообновите домашнюю страницу.Когда я обновляю любые другие страницы, кроме домашней страницы, он просто возвращает мне ошибку: Cannot GET /xxx (xxx - это путь)

см. Это изображение:

errImg

webpack.base.conf.js 

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const AutoDllPlugin = require('autodll-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// const isProduction = process.env.NODE_ENV == 'production'

module.exports = {
  entry: {
    bundle: path.resolve(__dirname, '../src/index.js'),
  },
  output: {
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, '../dist'),
    chunkFilename: '[id].chunk.js',
    // publicPath: 'production' == process.env.NODE_ENV ? '/' : '',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },

      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },

      {
        test: /\.css$/,
        use: [
          process.env.NODE_ENV !== 'production'
            ? 'vue-style-loader'
            : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: { importLoaders: 1 }
          },
          'postcss-loader',
        ]
      },

      {
        test: /\.scss$/,
        use: [
          process.env.NODE_ENV !== 'production'
            ? 'vue-style-loader'
            : MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ]
      },

      {
        test: /\.less$/,
        use: ['vue-style-loader', 'css-loader', 'less-loader']
      },

      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      },

      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, '../index.html')
    }),
    new VueLoaderPlugin(),
    new AutoDllPlugin({
      inject: true, //  自动把打包出来的第三方库文件插入到HTML
      debug: true,
      filename: '[name]_[hash].js',
      path: './dist',
      entry: {
        vendor: ['vue']
      }
    }),
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    })
  ],
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': path.resolve(__dirname, '../src')
    },
    extensions: ['.js', '.vue', '.json']
  }
}

webpack.dev.conf.js: 

const path = require('path')
const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.conf.js')

module.exports = merge(baseConfig, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    host: '192.168.12.1',
    port: 8080,
    // contentBase: path.resolve(__dirname, '../dist'),
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
})

package.json: 

"scripts": {
    "build": "node build/build.js",
    "dev": "webpack-dev-server --hot --progress --color --config build/webpack.dev.conf.js"
  },
...