京品吉橡胶强人线缆有限公司

详解html-webpack-plugin使用

2020-10-11  来源:互联网  我有话说  收藏本文

最近在react项目中初次用到了html-webapck-plugin插件,用到该插件的两个主要作用:

为html文件中引入的外部资源如script、link动态添加每次compile后的hash,防止引用缓存的外部文件问题

可以生成创建html入口文件,比如单页面可以生成一个html文件入口,配置N个html-webpack-plugin可以生成N个页面入口

1、安装


cnpm i webpack-plugin -D

2、在webpack.config.json中引用


const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin') //第一步
module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js',
    },
    mode: 'development',
    devServer: {
        open: true,
        port: 8080,
        hot: true,
        contentBase: 'src'
    },
    plugins: [
        new htmlWebpackPlugin({ //第二步
        template: path.join(__dirname, './src/index.html'), //指定生成模板的路径
        filename: 'index.html' //指定生成页面的名称
        })
    ]
}

3、html-webpack-plugin的作用

一、在内存中生成一个指定模板的文件,在访问时速度更快
二、自动为指定模板文件添加bundle.js文件

总结

本篇关于详解html-webpack-plugin使用的文章就介绍到这了,更多相关html-webpack-plugin使用内容请搜索本站以前的文章或继续浏览下面的相关文章。

(责编:Jony/实习)

声明:原文出自//article.nxpop.com/htm/4765.html ,文章观点仅代表原作者,转载请注明出处。

新网巢是非商业性和非盈利性的个人运营网站,文章仅供个人站长及爱好者学习交流使用,如涉及侵权,烦请告知,以便及时删除。

阅读  次  |  打印  |  关闭
匿名评论

用微信扫一扫

新网巢