从vue-cli学webpack配置2--针对webpack3

上一篇：从vue-cli学webpack配置--针对webpack2
　　现在大家用vue-cli工具新建的webpack工程应该是基于webpack3，与上一篇的不同之处在于它不在是用webpack-dev-middleware、webpack-hot-middleware来做热更新的，而是直接用webpack-dev-server，当然整个配置更加的简洁了。生产环境构建的配置与上一篇的区别是一致，我们直接看开发环境。
第一部分　 webpack-dev-server基础使用
webpack-dev-server是一个小型node express 服务，它是一个独立的npm包，npm install webpack-dev-server 后，你就可以通过命令启动它。
基础命令：

webpack-dev-server --inline --process --config  build/webpack.dev.conf.js
/* inline 
dev-server有两种模式，一种是iframe模式，一种是inline模式。
iframe模式，访问时需要 http://host:port/webpack-dev-server/path,加多一个webpack-dev-server，而inline则不用，推荐用inline

progress ：将运行进度输出到控制台
config:  指定配置文件
*/

然后我们看到package.json 也是这样启动服务的：

packge.json

那我们就看build/webpack.dev.conf.js:

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const path = require('path')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

// 这里同样也是合并基本的配置，加入开发环境的配置
// 指定devServer
const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,  //指定生成那种形式的souceMap，cheap-module-eval-source-map这个是适合开发环境

  // these devServer options should be customized in /config/index.js
  devServer: {
    clientLogLevel: 'warning', // 客户端报错等级
    historyApiFallback: {  // 当使用 HTML5 History API 时，下面匹配的路径，出现404 响应都可能需要被替代为 index.html
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true, //启用热部署
    contentBase: false, //告诉服务观察对应目录文件更改情况，文件更改后，会触发重新加载；这里为false // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,  // 指定可以访问的主机地址，默认是localhost，允许外网范围则是0.0.0.0
    port: PORT || config.dev.port, // 端口
    open: config.dev.autoOpenBrowser, // 是否自动打开浏览器
    overlay: config.dev.errorOverlay  
      ? { warnings: false, errors: true }
      : false,  // 当出现编译器错误或警告时，在浏览器中显示全屏叠加,其实就是我们经常看到的那个报错页面
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,  
    quiet: true, // necessary for FriendlyErrorsPlugin   //启用 quiet 后，除了初始启动信息之外的任何内容都不会被打印到控制台
    watchOptions: { // webpack 使用文件系统(file system)获取文件改动的通知,一些情况下不生效，所有采用轮询
      poll: config.dev.poll,
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})

这里实际上也是合并基础webpack配置，最后resolve出去。当我们通过命令行调动的webpack-dev-server，指定它的config的时候，程序为我们加载这个配置，提供给webpack-dev-server使用，这个dev-server是使用webpack帮我们打包，打包的东西不是输出到dist而是存在内存中。这个有两个注意点:
1、静态资源更新怎么检测到：
A 是 contentbase指定目录，进行检测，然后我们去手动更新目录的下的静态资源
B vue-cli工程使用CopyWebpackPlugin，同时启动hot热部署，当我们更改静态资源，CopyWebpackPlugin会帮我们复制过去，所以我们不需要手动去更改发布目录的下的静态资源，而且也不需要dev-server去帮我们检测发布目录的静态资源
2、webpack-dev-server是如何实现热替换
这点我在官网上找到答案:

官网的意思就是说，如果你启动了dev-server配置中的hot，那你需要搭配webpack.HotModuleReplacementPlugin, 这个插件是用来实现HRM，而且这个插件会有dev-server或者webpack自动调用，以实现热更新。

最后啰嗦几句，为啥是用portfinder？ 这个是一个检查当前机器开放端口的工具，因为我们启动的时候会帮我们看是否端口冲突，冲突则报错，不冲突这程序继续，暴露我们配置给调用我们的命令行进程。

整体webpack-dev-server的配置比上一篇使用node express服务，搭配webpck-dev-middleware和webpack-hot-middleware来实现热更新要来得简洁多。不过实际中，dev-server也是一样的，只不过人家帮你弄好罢了。但是配置更清晰易懂。

系列文章:
《什么是构建？ webpack打包思想？》
《webpack基础使用》
《从vue-cli学webpack配置1——针对webpack2》
《从vue-cli学webpack配置2——针对webpack3》
《webpack 、mainfest 、runtime 、缓存与CommonsChunkPlugin》
《webpack打包慢的解决方案》