webpack Watch Mode webpack-dev-server 热模替换

1.开启webpack监听,文件改动自动更新

• package.json文件

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "watch": "webpack --watch",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^2.0.0",
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^4.30.0",
      "xml-loader": "^1.2.1"
    }
  }

• webpack.config.js文件

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');

  module.exports = {
    mode: 'development',
    entry: {
      app: './src/index.js',
      print: './src/print.js',
    },
    devtool: 'inline-source-map',
    plugins: [
+     new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
      new HtmlWebpackPlugin({
        title: 'Development',
      }),
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };

• 现在从命令行运行npm run watch，您可以看到它没有退出命令行，因为脚本当前正在监视您的文件。现在保存文件并检查终端窗口。您应该看到webpack自动重新编译更改的模块！唯一的缺点是您必须刷新浏览器才能看到更改。

2.webpack-dev-server 实现热模替换

• webpack-dev-server为您提供了一个简单的Web服务器以及使用实时重载的功能。

npm install --save-dev webpack-dev-server

webpack.config.js文件

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const { CleanWebpackPlugin } = require('clean-webpack-plugin');

  module.exports = {
    mode: 'development',
    entry: {
      app: './src/index.js',
      print: './src/print.js',
    },
    devtool: 'inline-source-map',
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+   compress: true,
+    port: 8000,
+    publicPath: '/assets/'
+  },
    plugins: [
      new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
      new HtmlWebpackPlugin({
        title: 'Development',
      }),
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist'),
    },
  };

• 以上配置告诉webpack-dev-server您要从dist目录中的文件提供文件
• 最后添加一个脚本来轻松地运行开发服务器：
  package.json文件

  {
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "watch": "webpack --watch",
+     "start": "webpack-dev-server --open",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "clean-webpack-plugin": "^2.0.0",
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1",
      "express": "^4.15.3",
      "file-loader": "^0.11.2",
      "html-webpack-plugin": "^2.29.0",
      "style-loader": "^0.18.2",
      "webpack": "^4.44.1",
      "webpack-cli": "^3.3.2",
      "webpack-dev-server": "^3.11.0",
      "xml-loader": "^1.2.1"
    }
  }

• 现在我们可以从命令行运行npm start，我们将看到浏览器自动加载页面。如果现在更改任何源文件并保存它们，则在编译代码后，Web服务器将自动重新加载。试试看！
• 问题：webpack和webpack-dev-serve会产生版本兼容问题，本次亲测如下版本组合有效：

    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.2",
    "webpack-dev-server": "^3.11.0",

• webpack-dev-server编译后不写入任何输出文件。相反，它将捆绑文件保留在内存中，并像在服务器根路径上挂载的真实文件一样提供它们。如果您的页面希望在其他路径上找到捆绑文件，则可以使用publicPath开发服务器的配置中的选项进行更改。

• 引用于(详细可见)
  https://webpack.js.org/guides/development/