Webpack5学习笔记01

webpack是什么

webpack是一种前端资源构建工具，一个静态的模块打包器（module bundler）。在webpack看来，前端的所有资源文件（js/json/css/img/less）都会作为模块处理。

五个核心概念
    Entry
        入口：提示webpack以哪一个文件为入口起点打包，分析构建内部依赖图。
    Output
        输出：提示webpack打包后的资源bundles输出到哪里去，以及如何命名
    Loader
        Loader：相当于翻译官，让webpack能够取处理哪些非JavaScript文件（webpack本身只能理解JavaScript）
    Plugins
        插件：可以用于执行范围更广的任务。插件的范围包括从打包优化和压缩，一直到重新定义环境中的变量。
    Mode
        development
            会将DefinePlugin中process.env.NODE_ENV的值设置为development。
                能让代码本地调试运行的环境
        production
            会将DefinePlugin中process.env.NODE_ENV的值设置为production
                能让代码优化上线运行的环境

搭建一个基础开发环境

webpack.config.js
    webpack配置文件，webpack开发环境配置基本都在这里写

/*
  开发环境配置：能让代码运行
    运行项目指令：
      webpack 会将打包结果输出出去
      npx webpack-dev-server 只会在内存中编译打包，没有输出
*/

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
      {
        // 处理less资源
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理css资源
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        // 处理图片资源
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          name: '[hash:10].[ext]',
          // 关闭es6模块化
          esModule: false,
          outputPath: 'imgs'
        }，
        type: 'javascript/auto'
      },
      {
        // 处理html中img资源
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        // 处理其他资源
        exclude: /\.(html|js|css|less|jpg|png|gif)/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]',
          outputPath: 'media'
        }
      }
    ]
  },
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',
  devServer: {
    static: resolve(__dirname, 'build'),
    //启动gzip压缩
    compress: true,
    port: 3000,
    open: true
  }
};

webpack5踩得坑
    在devServer配置中出口文件配置要使用static而不是contextBase
    使用devServer之后打包命令在Webpack5要用npx webpack serve而不是npx webpack-dev-server
    处理图片资源的时候要在rules的具体规则中加一句type: 'javascript/auto'来阻止Webpack5自动打包