webpack学习02——Plungin的使用

BannerPlugin

webpack自带插件，用于为打包文件添加版权声明

在webpack.config.js中

• 引用webpack

const webpack = require('webpack')

• 使用插件

new webpack.BannerPlugin('最终版权归kami所有')

• 进行打包

npm run build

在打包后文件bundle.js的头部中

HtmlWebpackPlugin

用于打包html的插件

• 安装HtmlWebpackPlugin

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

在webpack.config.js中

var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');

var webpackConfig = {
  entry: 'index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'index_bundle.js'
  },
  plugins: [new HtmlWebpackPlugin()]
};

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

new HtmlWebpackPlugin()

UglifyjsWebpackPlugin

用于对打包的js文件进行压缩

安装

npm i -D uglifyjs-webpack-plugin

webpack.config.js

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

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