webpack 之 plugin的使用

一.认识plugin

1.plugin是什么?

  plugin是插件的意思,通常用于对现有架构进行扩展

  webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等等

2.loader和plugin区别

  loader主要用于转换某些类型的模块,它是一个转换器

  plugin是插件,他是对webpack本身的扩展,是一个扩展器  

3.plugin的使用过程

  步骤一:通过 npm 安装需要使用plugins

  步骤二:在webpack.config.js中配置plugins

 

二.plugin的使用

1.添加版权的plugin

?

1 2 3 4 5 6 7 8

const webpack  = require('webpack')   module.exports = {    ...    plugins:[       new webpack.BannerPlugin('最终版归coderwhy所有')    ]  }

重新打包程序,查看bundle.js文件的头部,看到如下信息

bundle.js的头部内容就会出现"最终版权归coderwhy所有"

 

2.HtmlWebpackPlugin的使用

作用:

1>自动生成一个index.html(可以指定模版来生成)

2>将打包的js文件,自动通过script标签插入到body中

安装HtmlWebpackPlugin插件

?

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

实际案例,webpack.config.js文件配置

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

let path = require("path"); const htmlWebpackPlugin = require("html-webpack-plugin"); const VueLoaderPlugin = require("vue-loader/lib/plugin"); module.exports = {   //入口   entry: path.join(__dirname, "./src/main.js"),   //出口   output: {     path: path.join(__dirname, "./dist"),     filename: "bundle.js",   },   //环境   mode: "development",   //插件   plugins: [     new htmlWebpackPlugin({       template: path.join(__dirname, "./src/index.html"),     }),     new VueLoaderPlugin(),   ],   devServer: {     port: 3000, // 端口号     open: true, // 自动打开浏览器   },   module: {     rules: [       {         // 正则表达式，用于匹配所有的css文件         test: /\.css$/,         // 先用 css-loader 让webpack能够识别 css 文件的内容         // 再用 style-loader 将样式, 以动态创建style标签的方式添加到页面中去         use: ["style-loader", "css-loader"],       },       {         test: /\.less$/,         use: ["style-loader", "css-loader", "less-loader"],       },       {         test: /\.(png|jpg|gif|jpeg)$/,         use: [           {             loader: "url-loader",             options: {               limit: 900000,             },           },         ],       },       {         test: /\.js$/,         exclude: /node_modules/,         use: {           loader: "babel-loader",           options: {             presets: ["@babel/preset-env"],           },         },       },       {         test: /\.vue$/,         use: ["vue-loader"],       },     ],   },   resolve: {     alias: {       //别名       vue$: "vue/dist/vue.esm.js",     },   }, };

　

3.uglifyjs-webpack-plugin的使用

作用:在项目发布之前,就必须要对js等文件进行压缩处理

?

1	npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

修改webpack.config.js文件,使用插件

?

1 2 3 4 5 6 7

const uglifyJsPlugin  = require('uglifyjs-webpack-plugin') module.exports = {    ...    plugins:{       new uglifyJsPlugin()    }  }

　　

4.webpack-dev-server@2.9.1

作用:npm install --save-dev webpack-dev-server@2.9.1

devserver也是webpack中的一个选项,选项本身可以设置如下属性

?

1 2 3 4

contentBase:为哪一个文件夹提供本地服务,默认根文件夹 port:端口号 inline:页面实时刷新 historyApiFallback:在SPA页面中,依赖HTML5的history模式