webpack-dev-server的配置和使用

一：什么是webpack-dev-server

它是一个webpack的包;webpack-dev-server不同于webpack它是应用于开发环境中的

二：webpack-dev-server的安装

• npm i webpack-dev-server
• 如果上述内容没有安装成功可执行npm i --save-dev webpack-dev-server

三：webpack-dev-server的配置

【第一步】

• 在package.json文件的scripts中设置执行命令

"dev": "webpack-dev-server --config webpack.config.js"
复制代码

【第二步】

• 在webpack.config.js文件中设置target: 'web'

module.exports = {
    target: 'web'
}
复制代码

【第三步】

• 其配置是需要根据不同的环境判断哪个是开发环境哪个是正式环境，此时需要安装插件cross-env cnpm i --save-dev cross-env

• window和Mac的环境变量是不同的
  

MAC:
"build": "NODE_ENV=production webpack --config webpack.config.js",
"dev": "NODE_ENV=development webpack-dev-server --config webpack.config.js"
复制代码

WINDOW:
"build": "set NODE_ENV=production webpack --config webpack.config.js",
"dev": "set NODE_ENV=development webpack-dev-server --config webpack.config.js"
复制代码

兼容方式:
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
复制代码

【第四步】

• 在webpack.config.js判断当前环境时开发环境还是正式环境

  • 第一步: 定义一个变量const isDev = process.env.NODE_ENV === 'development';
  • 第二步: 判断是否为开发环境

  if (isDev) {
      config.devServer = {
          port: 8000,
          host: '0.0.0.0',
          overlay: {
              errors: true,
          }
      }
  }
  复制代码

【第五步】

• 安装插件cnpm i --save-dev html-webpack-plugin其基本作用就是生成html文件,最主要的作用分为一下两点

  • 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
  • 可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

• 在webpack.config.js文件中引入html-webpack-plugin插件

  const HTMLPlugin = require('html-webpack-plugin');
  复制代码

• 在webpack配置里面加入插件

  // 调用的时候使用：process.env.NODE_ENV = 'development'
  plugins: [
      // 这里定义在js中可以引用用于判断当前开发环境
      new webpack.DefinePlugin({
          'process.env': {
              NODE_ENV: isDev ? '"development"' : '"production"'
          }
      }),
      new HTMLPlugin()
  ]
  复制代码

• 【切忌】 在webpack.config.js的文件中引入const webpack = require('webpack');（因为引用了webpack插件）

• 接下来运行npm run dev

  • 可能会出现以下报错

    ERROR in ./src/app.vue
    Module Error (from ./node_modules/_vue-loader@15.7.0@vue-loader/lib/index.js):
    vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
    @ ./src/index.js 2:0-27 12:21-24
    复制代码

  • 【解决方法】仔细查看后发现webpack.config.js文件中的plugins写了两个下面的替代了上面的，然后将new HTMLPlugin()和new VueLoaderPlugin()内容整合

      plugins: [
        // 这里定义在js中可以引用用于判断当前开发环境
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: isDev ? '"development"' : '"production"'
            }
        }),
        new HTMLPlugin(),
        new VueLoaderPlugin()
    ]
  复制代码

【第六步】

• 安装热加载插件，使页面不需刷新直接显示最新数据在判断中加入hot: true激活热更新并插入新的插件new webpack.HotModuleReplacementPlugin() / new webpack.NoEmitOnErrorsPlugin()并引入devtool

if (isDev) {
    config.devtool = '#cheap-module-eval-source-map',      // vue-devtools是一款基于chrome游览器的插件，用于调试vue应用
    config.devServer = {
        port: 8880,
        host: '0.0.0.0',
        overlay: {
            errors: true,
        },
        hot: true,           // 当修改一个组件时只修改当前的部分，不需要修改整个页面 
    },
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),         // 作用：HMR插件将HMR Runtime代码嵌入到bundle中，能够操作APP代码，完成代码替换
        new webpack.NoEmitOnErrorsPlugin()                // 作用：跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误。
    )
}
复制代码