Question

在学习Vue时，我曾考虑过不依赖Vue-Cli并自己配置Webpack，但发现了很多问题。

我根据文档配置了hot module replacement（HMR），但是发现当我更改vue单页面文件时，没有热过载，页面只是被刷新。
我发现我只能刷新主页。当我刷新主页以外的其他页面时，它只是返回了错误： Cannot GET /xxx（路径名称为xxx）

查看此图片：

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"
  },

Webpack-dev-server刷新页面错误，并且不能热过载

0 个答案: