Webpack打包解决浏览器缓存+ 基础入门手册

自己写的代码打包生成的文件名后面➕哈希值，以便于每次修改都重新更新

单独缓存第三方库

概述

Webpack 是一种前端资源构建工具，静态模块打包器 ( module bundler )。在 Webpack 看来，前端的所有资源文件 ( js / json / css / img / less / … ) 都会作为模块处理。它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源 ( module )。

基础使用

安装

首先使用 npm init 初始化项目，然后安装 webpack 以及 webpack-cli 。

// 全局安装
npm i webpack webpack-cli -g

// 本地安装(推荐)
npm i webpack webpack-cli -D

配置文件

在文件根目录下新建 webpack.config.js 配置文件

// webpack.config.js

module.exports = {
  entry: './assets/js/main.js',
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [

    ]
  },
  plugins: [

  ],
  mode: 'development'
}

打包命令

使用本地环境进行打包输出

npx webpack

核心概念

Entry 入口

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

Output 输出

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

module.exports = {
  ...
  output: {
    // 输出文件名称
    filename: 'app.js',
    // 输出文件路径
    path: path.resolve(__dirname, 'dist'),
    // 删除不需要的旧文件
    clean: true
  }
}

Loader 解析器

让 Webpack 能够去处理那些非 JavaScript 文件 ( Webpack 自身只理解 JavaScript )。

Plugins 插件

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

Mode 模式

指示 Webpack 使用相应模式的配置。

• development 开发模式：会将 process.env.NODE_ENV 的值设为 development。启用 NameChunksPlugin 和 NameModulesPlugin。特点是能让代码本地调试运行的环境。
• production 生产模式：会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin。特点是能让代码优化上线运行的环境。
• none：

devServer

在开发环境中，用于自动编译并自动刷新页面，方便开发过程中的调试。注：该功能只会在内存中编译打包，不会有任何文件输出，如需更新到生产环境中，还需重新打包代码。

下载

npm i webpack-dev-server -D

配置

在 webpack.config.js 文件中进行配置

module.exports = {
  ...
  devServer: {
    // 环境目录
    static: './dist',
    // 设置 gzip 压缩，提高传输效率
    compress: true,
    // 设置服务器主机
    host: '0.0.0.0',
    // 设置端口号
    port: 3000,
    // 设置路由
    historyApiFallback: true,
    // 自动打开页面
    open: true,
    // 更改后自动更新
    watchFiles: {
      paths: [
        './*'
      ],
      options: {
        usePolling: false
      }
    },
    // 启用热加载功能
    liveReload: true,
    // 启用热模块功能
    hot: true
}

启动

npx webpack-dev-server

资源模块 Asset Modules

官方说明：资源模块 | webpack 中文文档

该方法需将资源在 JS 中通过 import 进行导入或css中进行导入

// js 文件导入
import 命名 from '资源路径'

// css 文件引用
.box {
  background-image: url('资源路径');
}

资源模块类型

• asset/resource：发送一个单独的文件并导出 URL
• asset/inline：导出一个资源的 Data URI ( 64位图 )
• asset/source：导出资源的源代码
• asset：在导出一个资源的 Data URI 和发送一个单独的文件之间自动进行选择

resource

module.exports = {
  ...
  module: {
    rules: [
      {
        // 监听资源文件
        test: /\.png$/i,
        // 设置资源类型
        type: 'asset/resource',
        generator: {
          // 生成资源名称
          filename: 'assets/images/[name][ext]'
        }
      }
    ]
  }
}

• 资源名称可以使用 [contenthash][ext] 将资源名称生成为 hash 值命名

inline

module.exports = {
  ...
  module: {
    rules: [
      {
        // 监听资源文件
        test: /\.svg$/i,
        // 设置资源类型
        type: 'asset/inline'
      }
    ]
  }
}

source

module.exports = {
  ...
  module: {
    rules: [
      {
        // 监听资源文件
        test: /\.txt$/i,
        // 设置资源类型
        type: 'source'
      }
    ]
  }
}

asset

module.exports = {
  ...
  module: {
    rules: [
      {
        // 监听资源文件
        test: /\.jpg$/i,
        // 设置资源类型
        type: 'asset',
        // 小于设置的大小则转为 64 位图，否则转 URL
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024 // 4kb
          }
        },
        generator: {
          // 生成资源名称
          filename: 'assets/images/[name][ext]'
        }
      }
    ]
  }
}

资源处理

HTML 资源

打包 HTML

1、下载 html-webpack-plugin 插件

npm i html-webpack-plugin - D

2、在 webpack.config.js 文件中引入插件并调用

// 引用插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  ...
  plugins: [
    // 打包 HTML 文件
    new HtmlWebpackPlugin({
      // 指定 HTML 模版文件
      template: './index.html',
      // 指定 Script 标签位置
      inject: 'body'
    })
  ]
}

• Webpack 会在输出目录中新创建一个 HTML 文件，在原始的 HTML 文件中无需引入 JS 文件，通过 Webpack 编译后的 HTML 文件会自动引入。

官方说明：HtmlWebpackPlugin | webpack 中文文档

配置选项：GitHub - jantimon/html-webpack-plugin: Simplifies creation of HTML files to serve your webpack bundles

样式资源

打包 CSS 资源

下载样式处理解析器 css-loader 与 style-loader

npm i css-loader style-loader -D

在配置文件中添加解析器

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // 在 head 中创建 style 标签
          'style-loader',
          // 将 css 文件整合到 js 文件中
          'css-loader'
        ]
      }
    ]
  }
}

在 JS 文件中导入 CSS 文件

import '../css/main.css'

打包 SCSS 资源

下载样式处理解析器

npm i sass-loader sass -D

在配置文件中添加解析器

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 在 head 中创建 style 标签
          'style-loader',
          // 将 css 文件整合到 js 文件中
          'css-loader',
          // 编译 sass 文件为 css 文件
          'sass-loader'
        ]
      }
    ]
  }
}

在 JS 文件中导入 SCSS 文件

import '../css/main.scss'

抽离 CSS 代码为独立文件

下载插件 mini-css-extract-plugin

npm i mini-css-extract-plugin -D

引用插件

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 抽离 css 为独立文件
          MiniCssExtractPlugin.loader,
          // 将 css 文件整合到 js 文件中
          'css-loader',
          // 编译 sass 文件为 css 文件
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      // 对输出结果重命名
      filename: 'assets/css/[name].css'
    })
  ]
}

• 如果是生成模式，将自动压缩css文件，无需额外配置。

官方文档：MiniCssExtractPlugin | webpack 中文文档

视频教程：1.6.3-抽离和压缩CSS_哔哩哔哩_bilibili

CSS 代码压缩（生产模式）

安装插件 css-minimizer-webpack-plugin

npm i css-minimizer-webpack-plugin -D

在配置文件中进行配置

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")

module.exports = {
  ...
  optimization: {
    minimizer: [
      // 使用插件优化 css 代码
      new CssMinimizerPlugin()
    ],
  },
  // 模式
  mode: 'production'
}

• 压缩 CSS 代码，仅在生产模式下有效

官方文档：CssMinimizerWebpackPlugin | webpack 中文文档

CSS 兼容性处理

下载 postcss-loader, postcss, postcss-preset-env 模块

npm i postcss-loader postcss postcss-preset-env -D

在根目录下创建 postcss.config.js 文件并进行配置

module.exports = {
  plugins: [
    [
      'postcss-preset-env',
      {
        // 其他选项
      },
    ],
  ],
};

引用模块

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 抽离 css 为独立文件
          MiniCssExtractPlugin.loader,
          // 将 css 文件整合到 js 文件中
          'css-loader',
          // css 兼容处理
          'postcss-loader',
          // 编译 sass 文件为 css 文件
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      // 对输出结果重命名
      filename: 'assets/css/[name].css'
    })
  ]
}

postcss-preset-env 帮助 postcss 找到 package.json 中 browserslist 里的配置，通过配置加载指定的 css 兼容性

// 在 package.json 中添加浏览器列表
{
  ...
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firfoxe version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  }
}

视频教程：13_尚硅谷_css兼容性处理_哔哩哔哩_bilibili

视频教程：2.3.1-PostCSS与CSS模块_哔哩哔哩_bilibili

图片资源 *

下载图片处理解析器

npm i url-loader file-loader html-loader -D

...

字体资源

通过 CSS 引入字体资源

@font-face {
  font-family: 'PujiSansExpandedHeavy';
  src: url('../fonts/PujiSans-ExpandedHeavy.eot'); /* IE9 Compat Modes */
  src: url('../fonts/PujiSans-ExpandedHeavy.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../fonts/PujiSans-ExpandedHeavy.woff2') format('woff2'), /* Modern Browsers */
    url('../fonts/PujiSans-ExpandedHeavy.woff') format('woff'), /* Modern Browsers */
    url('../fonts/PujiSans-ExpandedHeavy.ttf') format('truetype'); /* Safari, Android, iOS */
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

在 webpack.config.js 文件中进行配置

module.exports = {
  ...
  module: {
    rules: [
      {
        // 监听资源文件
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        // 设置资源类型
        type: 'asset/resource',
        generator: {
          // 生成资源名称
          filename: 'assets/fonts/[name][ext]'
        },
      }
    ]
  }
}

数据资源

如需导入 CSV, TSV, XML 等数据格式文件，需使用相关的数据 loader 进行加载

视频教程：1.6.6-加载数据_哔哩哔哩_bilibili

自定义 JSON 资源

视频教程：1.6.7-自定义JSON模块parser_哔哩哔哩_bilibili

JS 资源

JS 语法检查

使用 eslint 扫描我们所写的代码是否符合规范，严格意义上来说，eslint 配置跟 webpack 无关，但在工程化开发环境中，他往往是不可或缺的。

安装

npm i eslint -D