webpack学习

webpack是前端资源构建工具，静态模块打包器，将资源打包成浏览器能够识别的语言

1、安装webpack，npm i webpack webpack-cli -g -g全局安装，安装完后就可以使用webpack命令

2、webpack可以打包JS、JSON、样式、图片、HTML等资源

3、webpack的配置，配置在webpack.config.js文件里，大致配置如下：

/*
  webpack.config.js  webpack的配置文件
  loader的使用：1、需要先下载 2、进行对应的配置
  plugins的使用：1、下载 2、引入 3、使用

  npm i style-loader css-loader less-loader url-loader file-loader eslint-loader eslint html-webpack-plugin mini-css-extract-plugin -D
*/

const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 将css单独打包到css的文件里面
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  // 入口文件，从哪个文件开始打包
  entry: './src/index.js',
  // 输出文件，打包输出到哪个文件
  output: {
    // 输出文件名
    filename: 'built.js',
    // 输出路径
    path: resolve(__dirname, 'build')
  },
  module: {
    // loader的配置
    // 注：不同的文件必须配置不同的loader处理
    rules: [
      // 处理css资源
      {
        // 哪些文件将会匹配
        test: /\.css$/,
        // 使用的哪些loader进行处理
        use: [
          // 注：use数组中loader执行顺序：从右到左，从下到上（先执行css-loader, 再执行style-loader），依次执行
          // 创建style标签，将js中的样式资源插入其中，并添加到head中生效
          // 'style-loader', // 这种方式css会打包到js文件里面
          MiniCssExtractPlugin.loader,
          // 将css文件变成commonjs模块加载js中，内容是样式字符串
          'css-loader'
        ]
      },
      // 处理less资源
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将less文件编译成css文件，需下载less-loader和less
          'less-loader'
        ]
      },
      // 处理样式中图片资源
      {
        test: /\.(jpg|png|gif|webp)$/,
        // 只使用一个loader, 需要下载url-loader  file-loader
        loader: 'url-loader',
        options: {
          // 小于8kb，就base64处理
          limit: 8 * 1024,
          // 关闭es6中的模块化，使用commonjs解析
          esModule: false,
          // 设置文件名
          name: '[hash:10].[ext]'
        }
      },
      // 处理html中img的图片
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      /*
        语法检测: eslint-loader eslint，只检查自己写的源代码，不检测第三方库
        package.json中eslintConfig设置
        需要安装：eslint-config-airbnb-base eslint-plugin-import eslint
      */
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {

        }
      },
      // 打包其他资源
      {
        // 除去css/js/html的资源
        exclude: /\.(css|js|html)$/,
        loader: 'file-loader'
      }
      /* 
        js兼容型处理
        1, 基本js兼容处理：@babel/preset-env
        2, 全部js兼容处理：@babel/polyfill
        3, 处理需要的js兼容性： 按需加载使用core-js
      */
    ]
  },
  // plugins 的配置
  plugins: [
    // html-webpack-plugin
    // 功能：默认会创建一个空的HTML, 自动引入打包输出的所有资源（js/css）
    new HtmlWebpackPlugin({
      // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin()
  ],
  // 配置服务器devServer,用于自动化（自动编译，自动打开浏览器，自动刷新）
  // 启动devServer指令为： npx webpack-dev-server (webpack4) / npx webpack serve (webpack5)
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 端口号
    port: 8080,
    // 自动打开浏览器
    open: true
  },
  // 模式
  mode: 'development' // 开发模式
  // mode: 'production' // 生产模式，会压缩代码
}