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
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插件
npm install html-webpack-plugin --save-dev
实际案例,webpack.config.js文件配置
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等文件进行压缩处理
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
修改webpack.config.js文件,使用插件
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中的一个选项,选项本身可以设置如下属性
contentBase:为哪一个文件夹提供本地服务,默认根文件夹 port:端口号 inline:页面实时刷新 historyApiFallback:在SPA页面中,依赖HTML5的history模式