其他分享
首页 > 其他分享> > 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
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插件如下有两个:

  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

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

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

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

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