webpack的基础使用

Webpack基础使用

一、Webpack是什么？

	Webpack 是一种前端构建工具，前端静态资源打包工具。
	
	1.构建工具，浏览器需要各种小工具将js、css等一些不能识别的语法处理成能识别的代码。
	构建工具就是这些小工具的集合
	
	2.打包工具，webpack 是以入口文件开始递归便利所有依赖，生成一个静态依赖图 - chunk文件。 
	再通过不同的loader对 文件进行编译处理，最终生成一个bundle文件输出。

二、Webpack 五个核心概念

1.Entry

 入口（Entry）指示 Webpack 以那个文件为入口起点开始打包，分析构建内部依赖图。

2.Output

 输出（Output）指示Webpack 打包后的资源bundles 输出到那里去，以及如何命名。

3.Loader

Loader 让 Webpack 能够去处理那些非JavaScript 文件（webpack 自身只理解JavaScript）

4.Plugins

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

5.Mode

模式（Mode）指示webpack 使用相应模式的配置。 development 开发模式 production 生产模式

代码：

module.exports = {
  // 入口文件
  entry: './src/index.js',
  // 输出
  output: {
    // 输出文件名
    filename: 'static/js/[name].[hash:5].js',
    // 输出路径
    // __dirname nodejs 的变量 代表当前文件的目录的绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader 配置
  module: {
    rules: [
      // 详细配置
      {
        // 匹配那些文件
        test: /\.css$/,
        // 使用那些loader
        use: [
          // 创建一个 style 标签，将js中的样式资源出入到head 中生效
          // 'style-loader',
          // 作用提取js 中的css 成单独文件
          MiniCssExtractPlugin.loader,

          // 将css 中的commonjs 模块加载js 中  内容是样式字符串
          'css-loader',

          /*
            css 兼容处理：postcss --> postcss-loader postcss-preset-env
            帮postcss 找到package.json 中borwserslist 里面的配置，通过配置加载指定的css兼容样式
          */
          // 使用loader的默认配置
          // 'postcss-loader',
          // 修改loader 的配置
          {
            loader: 'postcss-loader',
            ident: 'postcss',
            options: {
              postcssOptions: {
                plugins: [
                  require('postcss-preset-env')(),
                ]
              }
            }
          }

        ]
      }]
  },
  // plugins 的配置 压缩
  plugins: [
  	// 作用提取js 中的css 成单独文件
    new MiniCssExtractPlugin({
      filename: 'static/css/main[hash:4].css'
    }),
  ],
  // 模式
  mode: isDev ? 'development' : 'production',
  // mode: 'development', // 开发模式
  // mode:'production', // 生产模式
}

loader的配置：

css-loader:

  mpm install css-loader style-loader -D 

  rules:[
             {
                test: /\.css$/, // 只检测 css 为后缀的文件
                use: [ 
                    // 执行顺序 从下到上
                    'style-loader', // 创建一个 style 标签，将js中的样式资源出入到 html 的 head 中生效
                     'css-loader' // 将css 资源编译成commonjs的模块到js
                    ] 
            }
        ]

less-loader：

  mpm install less-loader -D 

  rules:[
           	{
                test: /\.less$/,
                use: ['style-loader','css-loader','less-loader'] 
            }
        ]

图片资源：

  npm install url-loader -D

      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        // 实在webpack5的官网中url-loader，file-loader已经是弃用了的，如果还要使用这两个废弃了的文件的话，
        // 必须加上最后那一句type: ‘javascript/auto’,否则会出现一张图片打包两次，
        // 而且会出现背景图片不会显示到页面上的问题
        type: 'javascript/auto',
        options: {
          // 小于8k 会转换成 bes64
          limit: 8 * 1024,
          // 问题： 因为url-loader 默认使用es6 模块化解析，而html-loader 引入图片是 commonjs
          // 解析时会出问题：[object Module]
          // 解决： 关闭 url-loader 的 es6模块化 使用commonjs 解析 
          esModule: false,
          // 重命名 [name] 取之前name [hash:4] 取哈希值的前四位 [ext]取之前图片后缀
          name: '[name].[hash:4].[ext]',
          outputPath: 'static/images'
        }
      },

html:

 npm install html-loader -D

      {
        test: /\.html$/,
        // 处理 html 文件的 img 图片 （负责引入img, 从而能被url-loader 进行处理）
        loader: 'html-loader'
      },

处理其他资源:

      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        type: 'asset/resource',
        generator: {
          filename: 'static/fonts/[name][ext]'
        }
      },

兼容性，配置babel

npm install babel-loader @babel/core @babel/preset-env -D

{
        test: /\.js$/,
        // 排除指定文件
        exclude: /node_modules/,
        loader: 'babel-loader',
        // 只检查对应文件  只检查 src 下的js
        include: resolve(__dirname, 'src'),
        options: {
          // 预设， 指示做什么兼容性处理
          presets: [
            // 基本兼容性
            ["@babel/preset-env",
              {
                // 按需加载
                useBuiltIns: 'usage',
                corejs: {
                  version: 3
                },
                // 指定做到那个版本
                targets: {
                  chrome: '60',
                  firefox: '60',
                  ie: '9',
                  safari: '10',
                  edge: '17'
                }
              }]
          ],
          // 开启babel 缓存
          // 第二次构建时会读取之前的缓存。
          cacheDirectory: true
        }
      }

plugins 插件的配置

处理HTML 的插件：

  npm install html-webpack-plugin -D

  const HtmlWebpackPlugin = require('html-webpack-plugin')  // 需要在上方创建变量引入插件

  plugins: [
    // 详细的plugins 
    // HtmlWebpackPlugin 默认会创建一个空的html
    new HtmlWebpackPlugin({
      // 复制 template 引入文件 并将所有打包资源引入
      template: './src/index.html',
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true,
      }
    }),
  ]

mode 模式

  // 模式
  mode: 'development',
  // mode: 'development', // 开发模式
  // mode:'production', // 生产模式

devServer 开发服务器

  devServer: {
    static: resolve(__dirname, 'public'),
    // 启动gzip 压缩
    compress: true,
    // 端口号
    port: 3003,
    // 是否直接打开
    open: true,
    // openPage
    // 开启HMR 功能 只会重新打包这一个模块，而不是打包所有的模块，这可以极大的提升构建速度
    hot: true,
    // 代理服务器 --》 解决开发环境跨域问题
    proxy: {
      // 一旦devServer(5000) 服务器接受到 /api/XXX 的请求，就会请求转发到另一个服务器
      '/api/': {
        target: 'http://localhost:3003',
        ws: true,
        changeOrigin: true,
        // 发送请求时，请求路径重写： 将 /api/XXX -> /XXX 去掉api  ( 重写地址 )
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },

部分属性介绍

  /*
    babel-loader js 文件兼容性  和缓存处理
    js 兼容性处理： babel-loader @babel/core @babel/preset-env
      1. 基本js兼容处理  --> @babel/preset-env
        问题：只能转换基本语法，如promise 不能转换
      2. 全部js兼容性处理 --> @babel/polyfill
        问题： 我只要解决部分兼容性问题，但是将所有兼容性代码全部引入， 体积太大
      3. 需要做兼容性处理就做： 按需加载 --> core.js

    babel缓存 cacheDirectory: true 开启缓存
      文件资源缓存  当修改文件时需要及时更新 可以将文件资源命名加入 hash , 可选择不同的 hash
      1. hash: 每次webpack 构建都会生成唯一值。每次打包所有文件都不走缓存
      2. chunkhash: 根据chunk 来生产的hash 如果打包来源于同一个 chunk 则都会加载。
      3. contenthash: 根据文件的内容生成hash 值，不同文件的hash 值不一样。

  */

  /*
    HMR 热模块替换
    作用: 一个模块发生变化，只重新打包这一个模块（而不是打包所有模块）
    极大提升构建速度
    样式文件: 可以使用HMR 功能 因为style-loader 内部实现了~
    js文件: 默认不能使用HMR 功能 （要手写。没必要，自能在入口js 手动监听限制加载引入模块。）
    HTML文件: 默认不能使用HMR， 导致问题，html 文件不能热更新了。（不需要HMR） 解决： 在入口 entry 引入html

  */

  /*
    source-map: 一种 提供源代码到构建后代码映射技术 （如果构建后代码出错了，通过映射关系可以追踪代码错误） 

    [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map

    inline-source-map: 内联
    hidden-source-map: 外联
    eval-source-map: 内联，在每一个模块后生成 source-map

    nosources-source-map： 外部
    cheap-source-map： 外部
    source-map： 外部

  */