webpack打包系列-4.文件观察及开发热重载

jacle
966 阅读3分钟

上一篇

webpack打包系列-3.使用plugin插件扩展

主要讲解了webpack构建项目常用的三个插件

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

并且在开发过程由于文件变动多次执行npm run build

其实还可以通过监听文件的修改进行重新构建，就解放双手，减少不必要的命令

webpack监听文件变化

webpack监听文件变化也是有两种方式

  1. watch命令
  2. webpack.config.js配置watch为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

会发现构建完成之后，终端命令行并没有退出，这个时候它已经在监听文件了

image.png

这是第一次构建出来的文件hash

现在修改一下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'));

保存改动的时候，会发现终端命令行继续滚动，发生变化，再构建一次

image.png

构建出来的文件hash值发生变更

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端口启动服务

image.png

image.png

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

总结

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

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

欢迎期待下一篇

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

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

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

avatar
文章
阅读
粉丝