webpack(三) plugin,WebpackDevServer和热更新

最新推荐文章于 2024-05-27 09:13:38 发布

Serein　

最新推荐文章于 2024-05-27 09:13:38 发布

阅读量286

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/x94410891/article/details/117754058

版权

plugin

plugin是webpack的一个插件机制，扩展webpack现有的功能

它为项目的构建提供了更加广泛的能力 webpack中的plugin，简单的理解就是对于webpack现有功能的扩展，比如打包优化、文件压缩功能。 plugin的范围更大，作用也更强。

插件

HtmlWebpackPlugin

打包完成后,该插件会自动生成一个html5文件,并把生成js模块引入html

1.1 安装

npm install -D html-webpack-plugin

1.2配置文件

//引入
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: "My App",              //title: ⽤来生成⻚面的title标题
      filename: "app.html",       //filename: 输出的 HTML ⽂件名，默认是 index.html
      template: "./public/index.html"     //模板文件
    })
  ]
};

名称	作用
title	用于生成的 html 文档的title标题
filename	输出的 HTML ⽂件名，默认是 index.html
template	模板文件

这里只是简单介绍了一些,想要了解更多的可以访问官网 https://github.com/jantimon/html-webpack-plugin#options

1.3打包

npm start    // 这个在package.json中配置过

paskage.json

"scripts": {
    "start": "./node_modules/.bin/webpack"
 }

如果不想用的话可以在cmd 中输入

.\node_modules\.bin\webpack

1.4 效果

打包之前文件

在这里插入图片描述

打包之后

在这里插入图片描述

1.5

在 html 模板 ,也就是入口文件 index.js 中，可以通过 <%=htmlWebpackPlugin.options.XXX%> 的方式获取配置的值

index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
    
</body>
</html>

效果图 app.html文件

在这里插入图片描述

clean-webpack-plugin

把上一次打包的文件先删除,在执行本次打包

2.1安装

npm install -D clean-webpack-plugin

2.2

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
  plugins: [
    new CleanWebpackPlugin(),
  ]
}

2.3 效果图

打包之前:

在这里插入图片描述

打包之后:

在这里插入图片描述

mini-css-extract-plugin

这个插件将 CSS 提取到单独的文件中。它为每个包含 CSS 的 JS 文件创建一个 CSS 文件。

它需要配合css-loader配合使用

3.1安装

npm install -D css-loader mini-css-extract-plugin

3.2配置

//引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
  	rules: [
  		{
  			test: /\.css$/,
  			use: [
  					{
  						loader: MiniCssExtractPlugin.loader
					},
         			 'css-loader'
        		]
			}
  		]
	},
  plugins: [
    new MiniCssExtractPlugin({
    	filename: 'aa.css'
    })
  ]
}

filename: 打包好文件的名字

3.3 效果图

在这里插入图片描述

sourceMap

SourceMap是devtool的一个值

SourceMap是一种映射关系。当项目运行后，如果出现错误，会生成map格式的文件,错误信息只能定位到打包后文件中错误的位置。如果想查看在源文件中错误的位置，则需要使用映射关系，找到对应的位置。

他会把打包后除了html文件之外的文件生成map格式的文件

在这里插入图片描述

4.1 配置

module.exports = {
  devtool: 'source-map'
}

4.2 aa.css.map文件

在这里插入图片描述

4.3map格式文件里的属性

属性	作用
version	source map的版本,目前为3
file	转换后的文件名
sourceRoot	转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。
sources	转换前的文件。该项是一个数组，表示可能存在多个文件合并。
names	转换前的所有变量名和属性名
mappings	记录位置信息的字符串
sourcesContent	转换前文件的内容

WebpackDevServer

搭建一个服务器

5.1安装

npm install -D webpack-dev-server

5.2配置

webpack.config.js文件

module.exports = {
  devServer: {
  	contentBase: "./dist",
  	open: true,
  	port: 8081
	}
}

属性	作用
contentBase	生成的虚拟目录路径
open	自动开启浏览器
port	端口

只写了一些,没写完整

package.json文件

"scripts": {
  "server": "webpack-dev-server"
}

5.3 运行

npm run serve

Hot Module Replacement

代码发生变化,页面自动刷新,不需要重新输入命名

6.1 配置

module.exports = {
  devServer: {
      contentBase: './dist',
      host:'localhost',
      port:8080,
      open:true,
      hot:true,
      index:'app.html',
      openPage:'app.html'
      // hotOnly:true,
  	
    }
}

6.2 属性

属性
hot	值为true 开启热更新
hotOnly	当值为true时,即使热更新不生效，也不去刷新整个页面(选择开启)
index	当访问服务器时,跳转的页面
openPage	把index添加到url地址上