首页 > 其他分享> 文章详细

webpack中的插件

2022-09-02 01:30:08 阅读：186 来源： 互联网

标签：插件 dev server webpack html 打包

1.webpack插件的作用

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

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

2.安装webpack-dev-server

安装webpack-dev-server

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

npm install webpack-dev-server@3.11.2 -D

View Code

　　2.配置webpack-dev-server

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

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

View Code

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

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

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

3.安装html-webpack-plugin

1.webpack插件的作用

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

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

2.安装webpack-dev-server

安装webpack-dev-server

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

View Code

　　2.配置webpack-dev-server

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

View Code

　　　　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

配置html-webpack-plugin

//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插件生效
}

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配置文件，必须要重启实时打包的服务器，否则最新的配置文件无法生效

标签：插件,dev,server,webpack,html,打包
来源： https://www.cnblogs.com/funkyd/p/16645124.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webpack中的插件