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()
]
}
压缩后的bundle.js代码
![}8B9B0JU0AWMUSU$%EV{{}I](C:\Users\Administrator\Documents\Tencent Files\1106408737\FileRecv\MobileFile\Image}8B9B0JU0AWMUSU$%EV{{}I.png)
标签:02,plugin,require,Plungin,js,webpack,html,HtmlWebpackPlugin 来源: https://www.cnblogs.com/kami233/p/13796200.html