webpack的插件使用

webpack-dev-server插件
1.插件使用之前
上次说过安装配置好webpack就可以使用了，但是此时却出现了问题，使用webpack进行打包的时候，开发人员每次更新代码，都需要重新运行一下webpack，很麻烦，此时就用到webpack的一个插件webpack-dev-server，webpack-dev-server 会启动一个实时打包的 http 服务器
2.webpack-dev-server的安装

npm install webpack-dev-server@3.11.2 -D

此时在package.json中就会出现以下配置

"devDependencies": {
    
    
    "webpack-dev-server": "^3.11.2"
  }

3.webpack-dev-server的配置
修改 package.json -> scripts 中的 dev 命令如下

"scripts": {
    
    
    "dev": "webpack serve"
  }

4.webpack-dev-server的使用
再次运行 npm run dev 命令，重新进行项目的打包
在浏览器中访问 http://localhost:8080 地址，查看自动打包效果
注意：此时查看项目的效果使用http://localhost:8080，如下图所示
在这里插入图片描述
此时打包生成的文件存放到了内存中，默认放到了项目的根目录中，而且是虚拟的、不可见的，可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件，<script src="/main.js"></script>

html-webpack-plugin插件
1.插件使用之前
前面说过安装webpack-dev-server插件就可以自动打包，在浏览器中访问http://localhost:8080 地址，然后想要看到项目的效果需要点击根目录中的src文件夹，才会执行里面的html文件，显示效果在这里插入图片描述
这时，如果我想要打开http://localhost:8080就可以直接显示项目效果的话，该怎么办呢？就用到了html-webpack-plugin插件，通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份，此时打开http://localhost:8080就可以直接显示效果。
2.html-webpack-plugin插件安装

npm install html-webpack-plugin@5.3.2 -D

安装成功在package.json中会出现如下代码

"devDependencies": {
    
    
    "html-webpack-plugin": "^5.3.2"
  }

3.html-webpack-plugin插件配置
在webpack.config.js进行如下配置：
① 导入html-webpack-plugin插件，得到插件的构造函数

const HtmlPlugin = require('html-webpack-plugin');

②new构造函数，创建插件的实例对象

const htmllPlugin = new HtmlPlugin({
    
    
    // 指定要复制哪个页面
    template:'./src/index.html',
    // 指定复制出来的文件名和存放路径
    filename:'./index.html'
});

③通过plugins节点，使htmllPlugin 插件生效

module.exports = {
    
    
    mode:"development",
    plugins:[htmllPlugin],
    devServer:{
    
    
        open:true,//初次打包完成后，自动打开浏览器
        host:'127.0.0.1',//实时打包所使用的主机地址
        port:80 //实时打包所使用的的端口号
    }
}

4.解惑 html-webpack-plugin
① 通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中
② HTML 插件在生成的 index.html 页面，自动注入了打包的 main.js 文件

猜你喜欢