webpack-dev-server的配置和使用

Tumi
9,218 阅读3分钟

一：什么是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()                // 作用：跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误。
    )
}
avatar
文章
阅读
粉丝