webpack学习02——Plungin的使用

BannerPlugin

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

在webpack.config.js中

  • 引用webpack
const webpack = require('webpack')
  • 使用插件
new webpack.BannerPlugin('最终版权归kami所有')
  • 进行打包
npm run build

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

webpack学习02——Plungin的使用

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()
  ]
}

压缩后的bundle.js代码

![}8B9B0JU0AWMUSU$%EV{{}I](C:\Users\Administrator\Documents\Tencent Files\1106408737\FileRecv\MobileFile\Image}8B9B0JU0AWMUSU$%EV{{}I.png)

上一篇:数据可视化的常用工具都有哪些?


下一篇:html-webpack-plugin