Webpackパッケージシリーズ-4.ファイルの観察と開発のホットリロード

前

Webpackパッケージシリーズ-3.プラグインプラグイン拡張機能を使用する

主にwebpack、プロジェクトの構築で一般的に使用される3つのプラグインについて説明します。

1. html-webpack-plugin
2. mini-css-extract-plugin
3. clean-webpack-plugin

そして、開発プロセス中に、ファイルの変更のために何度も実行されますnpm run build

実際、ファイルの変更を監視し、手を解放し、不要なコマンドを減らすことで再構築することもできます

webpackはファイルの変更をリッスンします

webpackファイルの変更を監視する方法も2つあります

1. watch注文
2. webpack.config.jswatchとして構成true

ファイルの変更をリッスンするコマンド

package.jsonのscript追加を変更しますwatch命令

{
  "name": "wepack-course",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch"  // watch命令
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.17.8",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.2.4",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "style-loader": "^3.3.1",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2"
  }
}
复制代码

埋め込むnpm run watch

ビルドが完了した後、ターミナルコマンドラインは終了せず、この時点ですでにファイルをリッスンしていることがわかります。

これはファイルハッシュの最初のビルドです

index.js次に、ファイルの内容を変更します

import React from 'react';
import ReactDom from 'react-dom';
import './index.css';
import img from './assets/indeex.png';

function helloworld() {
    const map = {
        hello: 'hello',
        world: 'webpack watch'  // 修改world从'code'变成'webpack watch'
    };
    const { hello, world } = map;
    return `${hello} ${world}`;
}
export default function App() {
    const str = helloworld();
    return <div className='content'>{ str } <img src={img}></img> </div>
}

ReactDom.render(<App />, document.querySelector('#root'));

复制代码

変更を保存すると、ターミナルのコマンドラインがスクロール、変更、再構築を続けることがわかります。

ビルドされたファイルのハッシュ値が変更されました

webpack.config.jsファイルの変更を監視するように構成する

一般的に、プロジェクトはより柔軟な構成ファイルで監視され、追加されたwatch属性は次のとおりです。true

webpack.config.js

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

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle_[hash].js'
    },
    mode: 'production',
    watch: true,  // 配置watch属性为ture,使用配置文件监听文件变化
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpe?g|webp|svg|gif)$/,
                use: 'file-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './src/index.html'),
        }),
        new MiniCssExtractPlugin(),
        new CleanWebpackPlugin(),
    ]
}
复制代码

このとき、まずコマンドラインを終了してファイルの変更を監視し、再度実行してください。npm run build

そのパフォーマンスはコマンドラインの監視と一致しており、ファイル監視モードに戻ります。

webpack開発ホットリロード

webpackファイルの監視は非常に便利ですが、ファイルを変更するたびに、変更された結果を表示するためにブラウザを手動で更新する必要があることに気付くのは少し面倒です。

webpackホットアップデートプラグインは自動的に更新に役立ちます

興味があればwebpack、ホットアップデートの原理を理解することができます。

webpack-dev-server

ホットアップデートをwebpack-dev-server実装する必要があります。ファイルが自動的にリッスンされ、ブラウザが更新されます。

インストール

npm i webpack-dev-server -D
复制代码

webpack-dev-server開始コマンド

スタートアップコマンドをファイルにpackage.json追加しますwebpack-dev-server

"start": "webpack-dev-server --open"
复制代码

package.json

{
  "name": "wepack-course",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open" // 开启webpack-dev-server
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.17.8",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "babel-loader": "^8.2.4",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.6.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "style-loader": "^3.3.1",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  }
}

复制代码

webpack.config.js構成で

在webpack.config.js里面配置服务内容，同时把mode属性修改成development，咱们一般在开发过程中才会使用到webpack-dev-server，并不会在打包中使用，同时这里webpack的自身文件监听可以去掉了watch属性删除

在文件中配置

devServer: {
    static: './dist'
}
复制代码

表示服务启动的内容为dist里面的内容

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

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle_[hash].js'
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader'
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpe?g|webp|svg|gif)$/,
                use: 'file-loader'
            }
        ]
    },
    devServer: {
        static: './dist'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './src/index.html'),
        }),
        new MiniCssExtractPlugin(),
        new CleanWebpackPlugin(),
    ]
}
复制代码

执行npm run start命令

会默认在8080端口启动服务

修改index.js文件里面的文字输出，浏览器会正常更新

总结

webpack自带监听文件功能，但是由于功能不够友好，改动后还需要手动刷新浏览器，才能看到修改后的结果，所以使用webpack-dev-server可以自动刷新浏览器，webpack-dev-server集成了文件监听功能，并且能自动刷新浏览器，修改完代码就可以直接看到结果！

至此，一个开发中基本上用到的webpack功能已经齐备。但是由于开发，测试，以及生产的代码可能会不太一致，比如构建生产代码时，webpack就不需要webpack-dev-server，那这样要如何对webpack进行处理呢？

欢迎期待下一篇

webpack打包系列-5.不同环境配置webpack

本系列文章主要是梳理webpack使用的基本脉络及进阶优化，文章会从基础到深入，做一个穿针引线功能，不然webpack的文档比较多且杂，容易眼花缭乱，对于刚上手webpack的人会比较不友好，基于本系列文章，可以抓住主要脉络，扩展webpack各项功能，打造符合需求且又舒心的webpack构建项目。

我是aWuYa，如果觉得我的文章对你有小小的帮助，麻烦给我点个赞，创作不易，你的点赞就是我最大的动力，万分感谢！