webpack中的插件

本文主要是介绍webpack中的插件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.webpack插件的作用

　　通过安装和配置第三方插件，可以拓展webpack的能力，从而让webpack用起来更方便。最常用的webpack插件如下有两个：

1. webpack-dev-server
   1. 类似于node.js阶段用到的nodemon工具
   2. 每当修改了源代码，webpack会自动进行项目的打包和构建
2. html-webpack-plugin
   1. 　　webpack中的HTML插件（类似于一个模板引擎插件）
   2. 可以通过此插件自定制index.html页面的内容

2.安装webpack-dev-server

1. 安装webpack-dev-server

　　运行如下的命令，即可在项目中安装此插件：

npm install webpack-dev-server@3.11.2 -D

　　2.配置webpack-dev-server

　　　　1.配置package.json - >scripts中的dev命令如下：　

'script':{
    'dev':'webpack serve',//script 节点下的脚本，可以通过npm run执行
}    

　　　　2.再次运行npm run dev 命令，重新进行项目打包

　　　　3.在浏览器中访问 http://localhost:8080地址，查看自动打包效果

　　注意：webpack-dev-server会启动一个实时打包的http服务器

3.安装html-webpack-plugin

1.webpack插件的作用

　　通过安装和配置第三方插件，可以拓展webpack的能力，从而让webpack用起来更方便。最常用的webpack插件如下有两个：

1. webpack-dev-server
   1. 类似于node.js阶段用到的nodemon工具
   2. 每当修改了源代码，webpack会自动进行项目的打包和构建
2. html-webpack-plugin
   1. 　　webpack中的HTML插件（类似于一个模板引擎插件）
   2. 可以通过此插件自定制index.html页面的内容

2.安装webpack-dev-server

1. 安装webpack-dev-server

　　运行如下的命令，即可在项目中安装此插件：

　　2.配置webpack-dev-server

　　　　1.配置package.json - >scripts中的dev命令如下：　

　　　　2.再次运行npm run dev 命令，重新进行项目打包

　　　　3.在浏览器中访问 http://localhost:8080地址，查看自动打包效果

　　注意：webpack-dev-server会启动一个实时打包的http服务器，bundle文件会被放到内存里边，JS加载引用路径应该修改为/bundle.js，页面访问路径为：服务器/src

3.安装html-webpack-plugin

运行如下的命令，即可在项目中安装此插件：npm install html-webpack-plugin@5.3.2 -D

1. 配置html-webpack-plugin

2. //1.导入HTML插件，得到一个构造函数
   const HtmlPlugin = require('html-webpack-plugin')
   
   //2.创建HTML插件的实例对象
   const htmlPlugin = new HtmlPlugin({
       template:'./src/index.html',// 指定源文件的存放路径
       filename:'./index.html',//指定生成的文件的存放路径
   })
   
   module.exports = {
       mode:'development',
       plugins:[htmlPlugin],//3.通过plugins节点，使htmlPlugin插件生效
   }

    

3. html-webpack-plugin的特性
   1. 　　可以自己引用JS到html
   2. 可以把Html复制到内存中的根目录里边

4.devServer节点

在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置，

实例代码如下：

devServer:{
    open:true,//初次打包完成后，自动打开浏览器
    host:'127.0.0.1',//实时打包使用的主机地址
    port：80，//实时打包所使用的端口号
}

注意：凡是修改了webpack.config.js配置文件，或修改了package.json配置文件，必须要重启实时打包的服务器，否则最新的配置文件无法生效

这篇关于webpack中的插件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！