Webpack 热模块替换示例项目教程

Webpack 热模块替换示例项目教程

webpack-hot-server-exampleWebpack Hot Module Replacement (HMR) Example with Express项目地址:https://gitcode.com/gh_mirrors/we/webpack-hot-server-example

1. 项目的目录结构及介绍

webpack-hot-server-example/
├── src/
│   ├── index.js
│   └── print.js
├── webpack.config.js
├── package.json
└── README.md

• src/：包含项目的源代码文件。
  • index.js：项目的入口文件。
  • print.js：一个简单的模块，用于打印消息。
• webpack.config.js：Webpack 的配置文件。
• package.json：项目的依赖管理文件。
• README.md：项目的说明文档。

2. 项目的启动文件介绍

src/index.js

这是项目的入口文件，主要负责创建一个简单的 HTML 元素，并引入 print.js 模块。

import _ from 'lodash';
import printMe from './print.js';

function component() {
  const element = document.createElement('div');
  const btn = document.createElement('button');

  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  btn.innerHTML = 'Click me and check the console!';
  btn.onclick = printMe;

  element.appendChild(btn);

  return element;
}

document.body.appendChild(component());

src/print.js

这是一个简单的模块，用于在控制台打印消息。

export default function printMe() {
  console.log('I get called from print.js!');
}

3. 项目的配置文件介绍

webpack.config.js

这是 Webpack 的配置文件，主要配置了开发模式、入口文件、源映射、插件和输出路径等。

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: {
    app: [
      'webpack/hot/dev-server',
      'webpack-dev-server/client?http://localhost:8080',
      './src/index.js'
    ]
  },
  devtool: 'inline-source-map',
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new HtmlWebpackPlugin({
      title: 'Hot Module Replacement'
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  devServer: {
    hot: true,
    client: true
  }
};

• mode：设置为 development，启用开发模式。
• entry：指定入口文件，包括热模块替换的运行时代码和开发服务器客户端代码。
• devtool：启用源映射，方便调试。
• plugins：配置插件，包括热模块替换插件和生成 HTML 文件的插件。
• output：指定输出文件的名称和路径，并清理输出目录。
• devServer：配置开发服务器，启用热模块替换和客户端支持。

以上是基于开源项目 webpack-hot-server-example 的教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望对你有所帮助！

webpack-hot-server-exampleWebpack Hot Module Replacement (HMR) Example with Express项目地址:https://gitcode.com/gh_mirrors/we/webpack-hot-server-example