搜索

首页  >  问答  >  正文

javascript - webpack-dev-server和webpack冲突吗

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

命令行执行webpack,输出dist文件夹,双击文件夹打开,页面显示正确

命令行执行webpack-dev-server,就没有输出dist文件夹,localhost访问的时候就报错了,因为没有js文件存在

请问这是什么原因?为什么webpack-dev-server的时候没有输出文件夹?

学习ing学习ing2714 天前946

全部回复(3)我来回复

  • 为情所困

    为情所困2017-06-26 11:00:51

    webpack-dev-server不会输出实际文件,都是在内存里的。

    回复
    0
  • 仅有的幸福

    仅有的幸福2017-06-26 11:00:51

    试试contentBase: path.resolve(__dirname,"你的路径")

    回复
    0
  • 阿神

    阿神2017-06-26 11:00:51

    webpack-dev-server不是输出文件,只是给本地开发提供了一个的服务器,方便开发而已,在打包的时候才会输出文件的。localhost访问的时候需要加上端口,就是你现在的配置的9200

    回复
    0
  • 取消回复