Cao Note

外观

Webpack 基础配置 ​

概述 ​

Webpack 是一个 JavaScript 静态模块打包器，当 webpack 处理应用程序时，它会递归地创建一个依赖关系图，包含应用程序的每个模块，然后将所有模块打包成一个或多个 bundle。

主要作用：

  • 打包：把多个 JS 文件打包成一个文件，减少服务器压力和下载带宽
  • 转换：把扩展语言转换成普通 JS，让浏览器顺利运行
  • 优化：随着前端复杂度提升，webpack 肩负起优化和提升的责任

安装 ​

bash
yarn init -y
yarn add webpack webpack-cli -D
# 打包命令
npx webpack
yarn init -y
yarn add webpack webpack-cli -D
# 打包命令
npx webpack

Webpack 可以进行 0 配置，默认直接支持 JS 模块化。

手动配置 ​

默认配置文件：webpack.config.js

js
const path = require('path')
module.exports = {
  mode: 'development', // development 不压缩 | production 压缩一行
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'bundle.[hash:8].js', // 添加 hash 戳解决缓存，:8 只显示 8 位
    path: path.resolve(__dirname, 'dist'), // 必须使用绝对路径
  },
}
const path = require('path')
module.exports = {
  mode: 'development', // development 不压缩 | production 压缩一行
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'bundle.[hash:8].js', // 添加 hash 戳解决缓存，:8 只显示 8 位
    path: path.resolve(__dirname, 'dist'), // 必须使用绝对路径
  },
}

指定配置文件：npx webpack --config <文件名>

json
// package.json
"scripts": {
  "build": "webpack --config webpack.config.js"
}
// package.json
"scripts": {
  "build": "webpack --config webpack.config.js"
}

devServer 开发服务器 ​

bash
yarn add webpack-dev-server -D
yarn add webpack-dev-server -D
js
module.exports = {
  devServer: {
    port: 3000,
    progress: true, // 打包进度条
    contentBase: './build', // 静态服务路径
    open: true, // 自动打开浏览器
  },
}
module.exports = {
  devServer: {
    port: 3000,
    progress: true, // 打包进度条
    contentBase: './build', // 静态服务路径
    open: true, // 自动打开浏览器
  },
}
json
"scripts": { "dev": "webpack-dev-server" }
"scripts": { "dev": "webpack-dev-server" }

html-webpack-plugin ​

自动创建 HTML 文件并引入打包资源：

bash
yarn add html-webpack-plugin -D
yarn add html-webpack-plugin -D
js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      minify: {
        removeAttributeQuotes: true, // 删除双引号
        collapseWhitespace: true, // 压缩为一行
      },
      hash: true, // 添加 hash 戳
    }),
  ],
}
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html',
      minify: {
        removeAttributeQuotes: true, // 删除双引号
        collapseWhitespace: true, // 压缩为一行
      },
      hash: true, // 添加 hash 戳
    }),
  ],
}

Loader 基础 ​

Loader 的特点：希望单一；从右向左执行，从下到上执行。

js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader', options: { insertAt: 'top' } },
          'css-loader',
        ],
      },
      {
        test: /\.scss$/,
        // 顺序从右向左：先 sass-loader 处理 sass，再 css-loader，最后 style-loader
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
}
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader', options: { insertAt: 'top' } },
          'css-loader',
        ],
      },
      {
        test: /\.scss$/,
        // 顺序从右向左：先 sass-loader 处理 sass，再 css-loader，最后 style-loader
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
    ],
  },
}

安装：yarn add css-loader style-loader -D、yarn add sass-loader node-sass -D

Hash 类型 ​

类型说明
hash跟整个项目构建相关，所有文件 hash 值一样，一改全改
chunkhash根据不同入口文件构建对应的 chunk，生成对应的 hash
contenthash由文件内容产生的 hash，内容不同则 hash 不同

实际中一般用 contenthash 来最大化利用浏览器缓存。

Resolve 配置 ​

js
module.exports = {
  resolve: {
    modules: [path.resolve('node_modules')], // 模块查找目录
    alias: { '@': path.resolve(__dirname, 'src') }, // 别名
    mainFields: ['style', 'main'], // 先查找 style 字段
    extensions: ['.js', '.css', '.json'], // 省略扩展名时从左至右查找
  },
}
module.exports = {
  resolve: {
    modules: [path.resolve('node_modules')], // 模块查找目录
    alias: { '@': path.resolve(__dirname, 'src') }, // 别名
    mainFields: ['style', 'main'], // 先查找 style 字段
    extensions: ['.js', '.css', '.json'], // 省略扩展名时从左至右查找
  },
}

命令行参数 ​

js
// process.argv：数组，最后一位可取到 -- 后的参数
// process.env.npm_lifecycle_event：取 script 脚本里的命令
// process.env.npm_config_cdn：运行 npm run build --cdn 返回 true
// process.argv：数组，最后一位可取到 -- 后的参数
// process.env.npm_lifecycle_event：取 script 脚本里的命令
// process.env.npm_config_cdn：运行 npm run build --cdn 返回 true

Copyright © 2024-present xiaocao