webpack---使用插件，常见webpack的plugin

webpack---使用插件，常见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对象实例

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

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

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

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

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

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

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

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

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