十、webpack之plugin

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 [email protected] --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静态服务配置

---