Does webpack-dev-server conflict with webpack - Stack Overflow

Question

webpack.congfig.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

module.exports = {
  // 这是一个主文件包括其他模块
  entry: './src/main.js',
  // 编译的文件路径
  output: {
      //`dist`文件夹
    path: './dist',
    // 文件 `build.js` 即 dist/build.js
    filename: 'build.js'
  },
  module: {
    // 一些特定的编译规则
    loaders: [
      {
        // 让webpack去验证文件是否是.js结尾将其转换
        test: /\.js$/,
        // 通过babel转换
        loader: 'babel',
        // 不用转换的node_modules文件夹
        exclude: /node_modules/
      },
      {
         test: /\.vue$/,
         loader: 'vue'
      }
    ]
  },
  vue: {
   loaders: {
    js: 'babel'
   }
  },
  plugins: [
    new HtmlWebpackPlugin({
        template:'./index.html',
        filename: 'assets/index.html'
    }),
    new CleanWebpackPlugin('./dist'),
  ],
   devServer: {  //建立本地服务器
        contentBase: "./",
        port: 9200,
        inline: true
    },
}

The command line executes webpack, outputs the dist folder, double-clicks the folder to open, and the page displays correctly

When the command line executes webpack-dev-server, there is no dist folder output. When accessing localhost, an error is reported because no js file exists

Is this what is the reason? Why is there no output folder when using webpack-dev-server?

Answer 1

webpack-dev-server will not output actual files, they are all in memory.

Answer 2

Try contentBase: path.resolve(__dirname,"your path")

Answer 3

webpack-dev-server is not an output file. It just provides a server for local development to facilitate development. The file is output only during packaging. When accessing localhost, you need to add the port, which is 9200 in your current configuration