webpack学习笔记（三）插件_webpack-dev-server 没有输出时间-优快云博客

本文链接：https://blog.youkuaiyun.com/Paranoia_yy/article/details/127155642

本文介绍Webpack的基本使用方法，包括如何指定入口文件、依赖管理和插件使用。通过实例演示了HtmlWebpackPlugin的安装及配置过程，并解释了webpack-dev-server的功能及其如何提高开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在webpack中，会指定一个入口文件，而这个入口文件又会依赖与其他的文件（如import xxx.js）
webpack会把这个依赖的关系都记录下来，然后交给webpack编译器，webpack编译器经过加工以后会生成目标文件，比如css文件和js文件。
webpack的编译过程需要一些工具帮忙，这些工具可以帮助webpack执行一些特定的任务，比如：打包优化，资源管理等。这些工具就是plugins

插件文档。
www.webpack.js.org/plugins
包含community社区的插件，weback内置的一些官方的插件，webpack contrib第三方的插件

以HtmlWebpackPlugin为例
首先需要npm install --save-dev html-webpack-plugin

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/index.js',
    output: {
        filename:'bundle.js',
        path: path.resolve(__dirname, './dist'),
        clean: true, 			// 清除上次的打包记录
    },
    mode: 'none',
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',	//设置导出的html模板
            filename:'app.html',			//设置导出的html文件名
            inject:'body',					//设置引入的js文件（上述output中bundle.js的引入位置）
        })
    ]
}

webpack-dev-server提供了一个基本的web server,并且具有live reloading(实时重新加载)功能。当页面修改了并且编译后，浏览器会侦听到文件的修改，来实现自动刷新。
webpack-dev-server没有输出任何的物理文件，他把输出的打包以后的bundle文件放到了内存里
安装npm install --save-dev webpack-dev-server
运行npx webpack-dev-server

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/index.js',
    output: {
        filename:'bundle.js',
        path: path.resolve(__dirname, './dist'),
        clean: true,
    },
    mode: 'development',
    devtool:'inline-source-map',
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'app.html',
            inject:'body',
        })
    ],
    // webpack-dev-server的配置在这
    devServer:{
        static:'./dist'
    }
}