#介绍npm Webpack插件

##前言

Webpack是一个强大的打包工具，可以大大提高前端开发效率。与此同时，Webpack还拥有一个强大的插件系统，使得我们可以根据自己的需求来扩展Webpack的功能。

本文将介绍几个常用的Webpack插件，并对它们的使用做出详细解释。

##copy-webpack-plugin

copy-webpack-plugin可以将文件或者整个目录拷贝到指定的目录中。这个插件非常适合用于构建时将静态文件拷贝到打包目录中，例如拷贝favicon.ico文件等。

安装方法：

npm install copy-webpack-plugin --save-dev

使用方法：

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

module.exports = {
    plugins: [
        new CopyWebpackPlugin([
            { from: 'static', to: 'static' }
        ])
    ]
};

这个例子将会把./static目录下的文件或文件夹拷贝到./build/static目录下。

##html-webpack-plugin

html-webpack-plugin可以自动生成HTML文件，并且将打包后的文件自动插入到HTML中。这个插件非常适合用于构建时生成HTML文件。

安装方法：

npm install html-webpack-plugin --save-dev

使用方法：

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

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            title: 'My App',
            template: 'src/index.html'
        })
    ]
};

这个例子将会自动生成./build/index.html文件，并且将打包后的文件自动插入到HTML中。

##uglify-webpack-plugin

uglify-webpack-plugin可以将打包后的文件进行压缩混淆，从而减小文件大小并提高加载速度。

安装方法：

npm install uglifyjs-webpack-plugin --save-dev

使用方法：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    plugins: [
        new UglifyJsPlugin()
    ]
};

这个例子将会对打包后的文件进行压缩混淆。

##extract-text-webpack-plugin

extract-text-webpack-plugin可以将CSS从JavaScript代码中分离出来，单独生成CSS文件。这个插件非常适合用于构建时分离CSS文件。

安装方法：

npm install extract-text-webpack-plugin --save-dev

使用方法：

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

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader'
                })
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin('styles.css')
    ]
};

这个例子将会把所有的.css文件打包成一个styles.css文件。打包后的JavaScript文件将不再包含CSS代码。

##总结

以上是几个常用的Webpack插件的介绍。当然还有很多其他的插件可以用于扩展Webpack的功能，熟练掌握并正确使用这些插件能让开发效率大大提高。