webpack-常见的loader与plugins介绍及配置

前言

webpack是一个前端资源加载/打包工具，webpack将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。webpack的作用主要是模块打包，如果想用好webpack，需要对loader和plugins有一定的了解，并能够灵活配置。所以，本篇文章主要介绍一些常用的loader和plugins

一、loader

1.less-loader

• 安装

  • less-loader 负责把 less 源码转成 css 代码

  • css-loader 负责读取 css 代码

  • style-loader 负责在 css 代码转变成 style 标签并作为页内样式插入到页面中去

  npm install less style-loader css-loader less-loader --save-dev
  

• 配置webpack.config.js

  {
      test: /\.less$/,             // 如果是 less 文件，该如何加载
      use: ['style-loader','css-loader','less-loader'], // 从左向右依次编译
  }
  

2.资源文件 loader

• 安装

  npm install file-loader url-loader --save-dev
  

• 配置webpack.config.js

  // 如果是 css 文件
  {
      test: /\.css$/, 
          use:['style-loader', 'css-loader']
  },
  // 图标
  {
      test:/\.(eot|svg|ttf|woff|woff2)/,
          use:{
              loader: 'url-loader',
                  options:{
                      limit: 8192
                  }
          }
  },
  // 图片
   {
      test:/\.(png|jpg|gif)$/,
      use:{
          loader: 'url-loader',
          options: {
             limit: 8192
          },
  
       }
  }
  

  file-loader与url-loader的区别可以查看上篇文章

3.postcss-loader

• 作用

  会自动为你代码添加兼容性前缀

• 安装

  npm i -D postcss-loader autoprefixer

• 新建postcss.config.js

  module.exports = {
      plugins: [
          require('autoprefixer')({
              overrideBrowserslist: [
                  "Android 4.1",
                  "iOS 7.1",
                  "Chrome > 31",
                  "ff > 31",
                  "ie >= 8"
              ]
          })
      ]
  };
  

  补充属性

  {
      test: /\.less$/,             // 如果是 less 文件，该如何加载
      use: ['style-loader','css-loader','less-loader','postcss-loader'], // 从左向右依次编译
  }
  

二、plugins

**loader**用于打包文件，plugins 用于解决一些其他任务，比如去注释等等。

1.html-webpack-plugin

• 作用

  生成一个HTML文件，然后将打包好的js文件自动引入到这个html文件，最终生成到output目录

• 安装

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

• 配置webpack.config.js

  var HtmlWebpackPlugin = require('html-webpack-plugin');
  var path = require('path');
  
  var webpackConfig = {
    entry: 'index.js',
    output: {
      path: path.resolve(__dirname, './dist'),
      filename: 'bundle.js'
    },
    plugins: [new HtmlWebpackPlugin({
              template: 'src/index.html'  // 以src/目录下的index.html为模板打包
          }
      )],
  };
  

2.imagemin-webpack-plugin

• 作用

  批量压缩图片

• 安装

  npm install --save-dev imagemin-webpack-plugin

• 配置

  //引入插件
  var ImageminPlugin = require('imagemin-webpack-plugin').default;
  
  //配置
  plugins: [
     new ImageminPlugin({
       disable: process.env.NODE_ENV !== 'production', // 开发时不启用
       pngquant: {//图片质量
         quality: '95-100'
       }
     })
  ]
  

3.clean-webpack-plugin

• 作用

  打包前清空输出文件

• 安装

  npm install --save-dev clean-webpack-plugin

• 配置

  //引入 const CleanWebpackPlugin = require('clean-webpack-plugin'); //清空dist文件夹 plugins: [ new CleanWebpackPlugin(['dist']) ]

4.mini-css-extract-plugin

• 作用

  将css从js中提取出来

• 安装

  npm install --save-dev mini-css-extract-plugin

• 配置

  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  plugins: [
    new MiniCssExtractPlugin(),
  ]
  

5.purifycss-webpack

• 作用

  去除冗余css代码

• 安装

  npm install --save-dev purifycss-webpack

• 配置

  const purifycssWebpack = require('purifycss-webpack');
  const glob = require('glob');
  
  // Make sure this is after ExtractTextPlugin!
  new purifycssWebpack({
  　　paths: glob.sync(path.resolve('./src/*.html'))
  }),