Webpack 4x 之路 （ 二 ）

服务于热更新

作为一个前端工程师，最大的编程需求应该就是所见即所得的工具了。webpack 3x之后实现了热更新的功能。

webpack-dev-server

安装

$ cnpm install webpack-dev-server --save-dev

在使用之前我们需要先来了解一下开发环境和生产环境 了。

开发环境： 在开发时需要的环境，开发时可能需要依赖许多的包。

生产环境： 程序开发完成，开始运行后的环境。

配置package.json

// 我们还需要一个包

$ cnpm install cross-env --save

// 那么为什么需要这个包呢
// 因为我们想要设置一个环境变量在我们的命令中，但是在不同系统上设置环境变量的方法是不一样的，为了解决这个问题，所以我们需要使用这个包，具体使用请看下面

// package.json
{
  "name": "webpack_new_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --mode development --config webpack.config.js"
    
    // 我来解释一下吧
    // build 是在我们开发完毕之后，最后打包使用的，使用webpack
    // dev 是我们在开发中使用的命令,使用webpack-dev-server
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.4.1",
    "webpack-cli": "^2.0.13",
    "webpack-dev-server": "^3.1.1"
  }
}

// webpack.config.js
var path = require('path');

const isDev = process.env.NODE_ENV === 'development'
// 这里用于判断环境变量是否是开发模式
const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  }
}

if(isDev) {
  // 在开发模式下的配置
  config.devServer = {
    host: 'localhost',    // 服务器的IP地址，可以使用IP也可以使用localhost
    compress: true,    // 服务端压缩是否开启
    port: 3000, // 端口
    hot: true,
    open: true, // 自动打开浏览器
    overlay: {
        errors: true
    }
  }
}

module.exports = config;

执行

$ npm run dev
// 然后就会打开你的浏览器

这样我们的热跟新就ok了，但是我们还需要一个html文件容纳我们打包过后的内容。这时候就要用到一个插件了html-webpack-plugin。

html-webpack-plugin使用

// 首先需要安装一下
$ cnpm install html-webpack-plugin --save

// wenbpack.config.js
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin')    //【1】 引入了我们安装的插件
var webpack = require('webpack')
const isDev = process.env.NODE_ENV === 'development'

const config = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js'
  },
  plugins: [                                // 【2】添加了插件选项
    new HtmlWebpackPlugin({
      filename: 'index.html',// 生成文件名
      template: 'index.html', // 模板文件
      inject: 'body'    // js插入的位置
    }),
    new webpack.HotModuleReplacementPlugin()
  ]
}

if (isDev) {
  config.devServer = {
    host: 'localhost',    // 服务器的IP地址，可以使用IP也可以使用localhost
    compress: true,    // 服务端压缩是否开启
    port: 3000, // 端口
    hot: true,
    open: true
  }
}

module.exports = config;

// 可能大家会发现我使用了另外一个插件 webpack.HotModuleReplacementPlugin

// 这事因为我在npm run dev 后出现了错误呢
// 控制台报错  [HMR] Hot Module Replacement is disabled
// 解决办法就是使用上面的插件

// 然后让我们在来运行一下吧
$ npm run dev

未完待续 ，小编会继续写下去的呢~~ 感谢大家的支持！！