webpack---使用插件,常见webpack的plugin,构建vue,react单页面/多页面工程APP必备插件

  • html-webpack-plugin
const htmlWebpackPlugin=require('html-webpack-plugin');

plugins:[
        new htmnlWebpackPlugin({
            template:'index.html',
            filename:'home.html',
            title:'webpack',
            data:'aaaaaa'
        })
    ]

//向index.html传入title和data变量值,并且生成home.html;一个plugins数组中科院有多个HtmlWebpackPlugin对象实例

  • open-browser-webpack-plugin
const OpenBrowserWebpackPlugin=require('open-browser-webpack-plugin');

plugins:[
    new OpenBrowserWebpackPlugin({url:'http://localhost:8877'})
]

//启动webpack之后,自动打开浏览器

  • extract-text-webpack-plugin
const ExtractTextPlugin=require('extract-text-webpack-plugin');

 plugins:[
     new ExtractTextPlugin('main.css')
    ]

//插件打包css代码到main.css中

  • copy-webpack-plugin
const CopyWebpackPlugin=require('copy-webpack-plugin');

new CopyWebpackPlugin([{
    from: __dirname + '/src/public'
}]);
//作用:把public 里面的内容全部拷贝到编译目录

  • webpack-md5-hash
const WebpackMd5Hash=require('webpack-md5-hash');

output: {
        //... 
        chunkFilename: "[name].[chunkhash:6].js"
},
plugins:[
    new WebpackMd5Plugin();
]

/// 它的作用是生成具有独立hash值的css和js文件,即css和js文件hash值解耦。webpack-md5-hash插件对chunk-hash钩子进行捕获并重新计算chunkhash,它的计算方法是只计算模块本身的当前内容(包括同步模块)。

  • clean-webpack-plugin
const cleanWebpackPlugin=require('clean-webpack-plugin');


plugins:[
    new cleanWebpackPlugin(['./dist','./build']);
]

/// build之前清除上次构建生成工程目录dist,build,根据需求传参,可以为数组或字符串

  • clean-webpack-plugin
const progressbarWebpack = require('progress-bar-webpack-plugin');


plugins:[
    new progressbarWebpack ();
]

/// 打包过程,以百分比显示打包进度

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值