webpack中的插件,对webpack现有的功能进行各种扩展,比如说打包优化、文件压缩等等
loader和plugin的区别
- loader主要用于转换某些类型的模块、它是一个转换器
- plugin是插件、它是对webpack本身的扩展,是一个扩展器
plugin的使用过程
- 步骤一:通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装);
- 步骤二:在webpack.config.js中的plugins中配置插件
----为打包的文件添加版权声明
const path = require('path');
const webpack= require('webpack'); //----1\引入
module.exports = {
plugins:[
// ----2\配置
new webpack.BannerPlugin('最终版权归唐都恩了所有')
],
entry: './src/min.js', //入口
output: {
}, //出口
module: { //配置loader
},
}
----将index.html打包到dist文件夹下
插件安装:npm install html-webpack-plugin --save-dev
作用:
- 自动生成一个index.html文件(可以指定模板来生成);
- 将打包的js文件,自动通过script标签插入到body中;
const path = require('path');
const webpack= require('webpack');
let HtmlWebpackPlugin = require('html-webpack-plugin'); //----1----在这里引入模块
module.exports = {
plugins:[
new HtmlWebpackPlugin({ //----2----在这里配置使用模块
template: './index.html', //需要放打包文件的html模板路径
filename: 'index.html' //打包完成后的这个模板叫什么名字
})
],
entry: './src/min.js', //入口
output: {
}, //出口
module: { //配置loader
rules: [ //规则
]
},
resolve:{
}
}
----将打包后的js进行压缩
插件安装:npm install uglifyjs-webpack-plugin --save-dev
如需与Cli2保持一致,则戴上版本号:npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
作用:
- 对打包后的js文件进行压缩处理
const path = require('path');
const webpack= require('webpack');
const UglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin');
module.exports = {
plugins:[
new UglifyjsWebpackPlugin()//js文件压缩
],
entry: './src/min.js', //入口
output: {
}, //出口
module: { //配置loader
rules: [ //规则
]
},
resolve:{
}
}
----静态服务配置
插件安装:npm install webpack-dev-server --save-dev
详情请跳转
webpack-dev-server静态服务配置