const path = require('path');
const merge = require('webpack-merge');
const OpenBrowserPlugin = require('open-browser-webpack-plugin');
const common = require('./webpack.common');
const webpack = require('webpack');
let devConfig = {
  mode: 'development',
  devtool:'inline-source-map',//在开发阶段开启sourceMap
  output: {
    filename: "[name]-main.js",
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: path.resolve(__dirname, "dist"), //网站的根目录为 根目录/dist，这个路径一般与output.path一致，因为html插件生成的html5页是放在output.path这个目录下
    port: 9000, //端口改为9000
    open:false, // 自动打开浏览器，每次启动服务器会自动打开默认的浏览器
    index:'main.html', // 与HtmlWebpackPlugin中配置filename一样
    inline:true, // 默认为true, 意思是，在打包时会注入一段代码到最后的js文件中，用来监视页面的改动而自动刷新页面,当为false时，网页自动刷新的模式是iframe，也就是将模板页放在一个frame中
    hot:true,
    compress:true, //压缩
    overlay:{//出现错误或警告时，是否覆盖页面线上错误消息
      warning:true,
      errors:true
    },
    publicPath:'/',//此路劲下打包可以在浏览器在访问
    proxy:{//设置代理
    }
  },
  module: {
    rules: [//项目开发完成之后要将css模块单独抽离出来，使用mini-css-extract-plugin，详见官方文档
      {
        test: /\.(sc|sa|c)ss$/, use: ['style-loader',//postcss css的预处理工具，记下来先
          {
            loader: 'css-loader',
            options: {sourceMap: true}
          }, {
            loader: 'sass-loader',
            options: {sourceMap: true}
          }]
      }//css.scss文件处理
      ]
  },
  plugins:[
    new OpenBrowserPlugin({
      url: 'http://localhost:9000'
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
};
module.exports = merge(common,devConfig);