webpack常见Loader包、Plugin包，以及相关配置的注意事项

loader 系列

css和less

//下载包
npm i -D style-loader css-loader less-loader

//webpack.config.js里rules配置示例：
{
  // 处理 less 资源
  test: /\.less$/,
  use: ['style-loader', 'css-loader','less-loader'],
}

url-loader 功能类似于 file-loader
但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL,一般用来处理图片

//下载包
npm i -D url-loader

//webpack.config.js里rules配置示例：
{
  // 处理 图片 资源
  test: /\.(jpg|png)$/,
  loader: 'url-loader',
  options:{
    limit: 8 * 1024,
    name:'[hash:10].[ext]',
    esModule:false,
    outputPath:'images'
  }
}

处理html里面的 图片 文件等

//下载包
npm i -D html-loader

//webpack.config.js里rules配置示例：
{
  // 处理html里面的 图片 文件
  test: /\.html$/,
  loader: 'html-loader',
}

处理其他资源,排除上面的

//下载包
npm i -D file-loader 

//webpack.config.js里rules配置示例：
{
  // 处理其他资源,排除上面的
  exclude: /\.(html|js|css|less|jpg|png)$/,
  loader: 'file-loader',
  options:{
    name:'[hash:10].[ext]',
    outputPath:'font'
  }
}

通过postcss-loader添加浏览器前缀，做浏览器兼容处理

//下载包
npm i -D postcss-loader postcss-preset-env

//webpack.config.js里rules配置示例：
{
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        plugins: () => [
          // postcss的插件,帮助postcss找到package.json里面的browserslist配置，达到兼容指定浏览器的效果
          require('postcss-preset-env')()
        ]
      }
    }
  ]
}


//package.json里面browserslist配置：
"browserslist": {
    "production": [
      ">0.1%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      ">0.1%",
      "not dead",
      "not op_mini all"
    ]
  }

browserslist更多资料参考

Plugin 系列

使用各种Plugin 打包优化、压缩、浏览器兼容等，配合loader完成资源打包等更多高阶功能

1、将js中import的css文件提取出来，以link方式插入html 【推荐使用】

//下载包
npm i mini-css-extract-plugin -D

//webpack.config.js里配置示例：
//先引入插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

//在plugins里面增加配置
new MiniCssExtractPlugin()

//rules配置
{
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader'
  ]
}

2、处理js中import的css文件 通过css-loader、style-loader、extract-text-webpack-plugin@next将js中import的css文件以link的方式插入到html
webpack3.0通常使用该插件，webpack4.0通常使用mini-css-extract-plugin
【不推荐使用】

//下载包
npm i extract-text-webpack-plugin 
//webpack4之前使用

3、通过安装配置html-webpack-plugin 插件复制’./src/index.html’ 文件，并自动引入打包输出的所有资源（JS/CSS），同时可以实现压缩html的功能

//下载包
npm i -D html-webpack-plugin

new HtmlWebpackPlugin({
 template:'./src/index.html', //指定模板
  // 压缩html 代码
  minify: {
    // 移除空格
    collapseWhitespace: true,
    // 移除注释
    removeComments: true
  }
})

注意： 使用html-webpack-plugin后，源文件不要再引入打包后的资源文件了，要不然编辑报错 ，具体分析见：https://blog.csdn.net/daodaoke/article/details/107370795

4、通过安装配置optimize-css-assets-webpack-plugin 压缩 CSS

//下载包
npm i -D postcss-loader postcss-preset-env

loader 和 Plugin 组合使用

1、js 语法检查

//先下载包
npm i -D eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import


//webpack.config.js里rules配置示例：
{
	test: /\.js$/,
	exclude: /node_modules/,
	loader: 'eslint-loader',
	options: {
		// 自动修复eslint 的错误
		fix: true
	}
}

//package.json里面配置：
"eslintConfig": {
    "extends": "airbnb-base",
    "env": {
      "browser": true
    }
  }

2、js 兼容性处理

//先下载包
npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill core-js


//webpack.config.js里rules配置示例：
{
 test: /\.js$/,
 exclude: /node_modules/,//排除第三方的库
 loader: 'babel-loader',
 options: {
 // 预设：指示babel 做怎么样的兼容性处理
 presets: [
     [
       '@babel/preset-env',
       {
         // 按需加载polyfill，不配置这个就是默认全部加载
         useBuiltIns: 'usage',
         // 指定core-js 版本
         corejs: {
           version: 3
         },
         // 指定兼容性做到哪个版本浏览器
         targets: {
           chrome: '60',
           firefox: '60',
           ie: '9',
           safari: '10',
           edge: '17'
         }
       }
     ]
   ]
 }
}