【广州前端】- 常见webpack插件 - 黑马程序员技术交流社区

[JavaScript] 纯文本查看 复制代码

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对象实例

[JavaScript] 纯文本查看 复制代码

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



plugins:[

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

]



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

[JavaScript] 纯文本查看 复制代码

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



 plugins:[

     new ExtractTextPlugin('main.css')

    ]



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

[JavaScript] 纯文本查看 复制代码

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



new CopyWebpackPlugin([{

    from: __dirname + '/src/public'

}]);

//作用：把public 里面的内容全部拷贝到编译目录

[JavaScript] 纯文本查看 复制代码

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，它的计算方法是只计算模块本身的当前内容（包括同步模块）。

[JavaScript] 纯文本查看 复制代码

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





plugins:[

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

]



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

[JavaScript] 纯文本查看 复制代码

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





plugins:[

    new progressbarWebpack ();

]



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