webpack 之 plugin的使用

2021-09-30 23:13:48

一.认识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模式