webpack的作用

1.webpack的由来

由于浏览器解析不了es6及以上的语法，无法编译less/sacc等，所以我们需要各种插件去es6编译es5、将less编译成css，比较杂乱，所以就有了webpack将这些插件组合在一起

2.webpack的概念

webpack是一种前端资源构建工具，一个静态模块打包器

举个例子：vue中的入口文件会导入jquery，less文件等 ，将这些导入形成依赖关系图，打包后输出

3.webpack的5个核心概念

a.entry入口

入口指示webpack以哪个文件为入口文件开始打包，分析构建内部依赖图

b.output输出

输出指示webpack打包后的资源bundles输出到哪里，以及如何命名

c.loader（翻译官的作用）

loader可以让webpack能够处理那些非js文件（webpack自身只理解js、json，现webpack5可以处理图片资源了～）

d.plugins

插件plugins可以用于执行范围更广的任务。插件的范围包括：从打包优化和压缩、一直到重新定义环境中的变量

e.mode

模式指示webpack使用相应模式的配置

/*
  webpack.config.js是webpack的配置文件
  作用：告诉webpack干哪些活（运行webpack指令时，会加载里面的配置）

  所有的构建工具都是基于nodejs平台运行的，模块化默认采用commonjs
*/

// resolve用来拼接绝对路径的方法
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // webpack配置
  // 入口文件
  entry: './src/index.js',
  // 输出
  output: {
    // 输出文件名
    filename: 'built.js',
    // 输出路径 __dirname是nodejs的变量，代表当前文件webpack.js目录的绝对路径02打包样式资源
    // 输出到build目录下去
    path: resolve(__dirname, 'build')
  },
  // loader的配置（1.下载2.使用）
  module: {
    rules: [
      {
        // test:使用正则匹配文件
        test: /\.css$/,
        // use:使用哪些loader进行处理，执行顺序是倒序依次执行，比如会先使用css-loader再使用style-loader
        use: [
          // style-loader会创建style标签，将js中的样式资源插入进行，添加到head中生效
          'style-loader',
          // css-loader会将css文件变成commonjs模块加载js中，里面内容是样式字符串
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          // 将less文件编译成css文件,需要安装less和less-loader
          'less-loader'
        ]
      },
      // 处理图片资源【webpack5会自动处理图片资源 ！！加上以下配置反而图片显示不出来，webpack4可以用以下配置】
      // {
      //   test: /\.(jpg|png|gif)$/,
      //   // 使用多个loader时可以用use:[],如果只使用一个loader可以直接写loader:‘xxx’
      //   // url-loader依赖file-loader，所以需要下载两个包
      //   loader: 'url-loader',
      //   // 图片配置信息
      //   options: {
      //     // 一般会对小图片进行base64处理，这里是当图片小于8kb时，就会被base64处理成字符串
      //     // 优点：减少请求数量（减轻服务器压力）
      //     // 缺点：图片体积会变大导致问价请求速度变慢
      //     limit: 10 * 1024, //根据项目情况来定，假如项目中小图片是9kb,难么这里可以设置10*1024
      //     // 在webpack4中ulr-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
      //     // 解析时会出现问题：src内容会变为[object module]
      //     // 解决办法：关闭url-loader的es6模块化，使用commonjs解析
      //     esModule: false,
      //     // 打包后的图片的名称是hash值，字符比较长，可以自定义命名
      //     // 意思为：取hash值的前10位，[ext]是指取文件原来扩展名
      //     name: '[hash:10].[ext]'
      //   }
      // },
      // html-loader处理html中的img图片资源（负责引入img标签，然后交由url-loader进行解析处理）
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      // 打包其他资源(除了html/css/js以外的资源)
      {
        // exclude:排除html，css,js资源的其他资源都适用file-loader（比如字体图标iconfont）
        exclude: /\.(html|css|js)$/,
        loader: 'file-loader'
      }
    ]
  },
  // 插件（1.下载2.引入3.使用）
  plugins: [
    // html-webpack-plugin插件会打包html文件
    // 功能：会默认创建一个空的html，自动引入打包后输出的所有资源（js/css）
    new HtmlWebpackPlugin({
      // template模版：意味复制./src/index.html文件，并自动引入打包后输出的所有资源
      template: './src/index.html'
    })
  ],
  // 模式
  mode: 'development'
}