webpack.dev.conf.js文件

1. webpack.dev.conf.js文件是在项目开发环境下使用的文件。该文件中的module对象：rules中增加了cssSourceMap的功能。
   const devWebpackConfig = merge(baseWebpackConfig, {

   module : {

   rules : utils . styleLoaders({

   sourceMap : config .dev .cssSourceMap,

   usePostCSS : true

   })

   },
2. devServer对象：首先在开发模式下，devServer 提供虚拟服务器，让我们进行开发和调试。其次它不是 webpack 内置插件，如果没用vue-cli搭建的话是需要手动安装的。
   devServer : {

   clientLogLevel : 'warning',

   historyApiFallback : {

   rewrites : [{

   from : / . * /,

   to : path .posix . join(config .dev .assetsPublicPath, 'index.html')

   }, ],

   },
3. hot设置：hot—热模块更新作用。即修改代码模块后，保存会自动更新，页面不用刷新就呈现最新的效果。这和 webpack.HotModuleReplacementPlugin （HMR） 这个插件是一样功能，但是HMR 这个插件是真正实现热模块更新的。而 devServer 里配置了 hot: true , webpack会自动添加 HMR 插件。所以模块热更新最终还是 HMR 这个插件起的作用。
4. contentBase：值可以为boolean string array三种类型。你要提供哪里的内容给虚拟服务器用。这里最好填 绝对路径。默认情况下，它将使用当前的工作目录来提供内容。false表示不使用contentBase来指定，直接使用工作目录来提供内容。
   //配置单目录

   contentBase: path. join(__dirname, "public")

   // 配置多目录

   contentBase: [

   path. join(__dirname, "public"),

   path. join(__dirname, "assets")

   ]
5. compress: 如果为 true ，开启虚拟服务器时，为你的代码进行压缩。加快开发流程和优化的作用。
6. host：写主机名的，默认 localhost。port: 端口号，默认 8080。open:设置为true，则启动项目时自动打开浏览器。
7. overlay：如果为 true ，在浏览器上全屏显示编译的errors或warnings。默认 false （关闭）
   overlay : config .dev .errorOverlay ? {

   warnings : false, //不显示

   errors : true //显示

   } : false,
8. publicPath：配置了 publicPath后， url = '主机名' + 'publicPath配置的' +'原来的url.path'。这个其实与 output.publicPath 用法大同小异。output.publicPath 是作用于 js, css, img 。而devServer.publicPath 则作用于请求路径上的。假如配置publicPath: "/assets/"——原本路径 --> 变换后的路径http://localhost:8080/app.js --> http://localhost:8080/assets/app.js。
9. proxy：当你有一个单独的API后端开发服务器，并且想要在同一个域上发送API请求时，则代理这些 url 。如下图，假设你主机名为 localhost:8080 , 请求 API 的 url 是 http：//your_api_server.com/user/list。'/proxy'：如果点击某个按钮，触发请求 API 事件，这时请求 url 是http：//localhost:8080/proxy/user/list 。changeOrigin如果 true ，那么 http：//localhost:8080/proxy/user/list 变为 http：//your_api_server.com/proxy/user/list 。但还不是我们要的 url 。pathRewrite：重写路径。匹配 /proxy ，然后变为'' ，那么 url 最终为 http：//your_api_server.com/user/list 。

   proxy : {

   '/proxy': {

   target : 'http://your_api_server.com',

   changeOrigin : true,

   pathRewrite : {

   '^/proxy': ''

   }

   }
10. quiet：如果为true则终端输出的只有初始启动信息。 webpack 的警告和错误是不输出到终端的。
11. watchOptions：是一组自定义的监听模式，用来监听文件是否被改动过。
    watchOptions : {

    //一旦第一个文件改变，在重建之前添加一个延迟。填以毫秒为单位的数字。

    aggregateTimeout : 300,

    //填以毫秒为单位的数字。每隔多少时间查一下文件是否改动。不想启用也可以填false。

    poll : 1000,

    //如果观察许多文件系统会导致大量的CPU或内存使用量，在这里可以排除一个巨大的文件夹。

    ignored : /node_modules/

    }
12. plugins：以数组形式包住一个个 plugin 实例。每个插件实例是一个具有 apply 属性的 js 对象，每个插件都有自身 options（配置）。plugins里面的常见插件：HotModuleReplacementPlugin是热模块更换（HMR） 。在应用程序运行时交换，添加或删除模块，而无需完全重新加载。NoEmitOnErrorsPlugin作用：跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误。HtmlWebpackPlugin --第三方插件，根据你提供的 html 模板 生成 html。DefinePlugin：它的作用是定义全局常量，是常量。在模块用它定义的全局常量，那么你就不能改变它的值.
    plugins : [

    new webpack. DefinePlugin({

    'process.env': require( '../config/dev.env')

    }),

    new webpack. HotModuleReplacementPlugin(),

    new webpack. NamedModulesPlugin(),

    new webpack. NoEmitOnErrorsPlugin(),

    new HtmlWebpackPlugin({

    filename : 'index.html',

    template : 'index.html',

    inject : true

    }),

    new CopyWebpackPlugin([{

    from : path . resolve( __dirname, '../static'),

    to : config .dev .assetsSubDirectory,

    ignore : [ '.*']

    }])

    ]