第 2 章 webpack 开发环境基本配置

无悟饭空
119 阅读7分钟

2.1 创建配置文件

webpack.config.js文件与src为同级目录

image.png

webpack.config.js的作用：指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）；

所有的构建工具基于nodejs平台运行的，因此模块化默认采用commonjs。

2.1.1 基本结构

const { resolve } = require('path');

module.exports = {
  // webpack配置
  // 入口起点
  entry: './src/index.js',
  // 输出
  output: {
    // 输出文件名
    filename: 'built.js',
    // 输出路径
    // __dirname nodejs的变量，代表当前文件的目录绝对路径
    path: resolve(__dirname, 'build')
  },
  // loader的配置
  module: {
    rules: []
  },
  // plugins的配置
  plugins: [
    // 详细plugins的配置
  ],
  // 模式
  mode: 'development', // 开发模式
  // mode: 'production'
}

2.1.2 resolve 和 join

在 Node.js 的 path 模块中，resolve 和 join 都是用于处理文件路径的方法，但它们的功能和用法有所不同。

resolve方法将路径片段解析为绝对路径。它根据当前工作目录来解析路径，返回一个绝对路径。如果提供了多个路径片段，则会从右到左依次进行解析，直到生成一个绝对路径。例如：

const path = require('path'); const absolutePath = path.resolve('src', 'index.js'); 
console.log(absolutePath); // 输出: '/Users/user/project/src/index.js'

join方法将路径片段连接起来形成一个新的路径。它会自动处理路径分隔符，确保生成的路径是正确的。与 resolve 方法不同，join 方法不会将路径解析为绝对路径，而只是简单地连接路径片段。例如：

const path = require('path'); const joinedPath = path.join('src', 'index.js'); 
console.log(joinedPath); // 输出: 'src/index.js'

总结起来，resolve 方法用于解析绝对路径，而 join 方法用于连接路径片段。具体使用哪个方法取决于你的需求和路径处理的方式。

2.1.3 loader的配置

rules数组中的每一个对象包裹的是对应的单独的某一类文件处理。每个对象都有如下可选配置

  • test：用于匹配需要应用此规则的文件路径的正则表达式。
  • include：用于指定需要应用此规则的文件路径的目录路径或文件路径的数组。
  • exclude：用于排除不需要应用此规则的文件路径的目录路径或文件路径的数组。
  • use：指定要使用的 loader 或 loader 数组，用于对匹配到的文件进行处理。
  • loader：指定要使用的 loader 的名称。
  • options：传递给 loader 的选项对象。

2.1.4 plugins的使用

  1. 首先我们要下载对应插件xxx
  2. 在配置文件中引入该插件
  3. 插件都是一个构造函数，因此我们需要在plugins配置项中，使用new xxx({}),对应的配置写在{}中。
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development'
};

2.2 处理样式资源

2.2.1 style-loader

创建style标签，将js中的样式资源插入进行，添加到head中生效

2.2.2 css-loader

将css文件变成commonjs模块加载js中，里面内容是样式字符串

2.2.3 less-loader

将less文件编译成css文件

2.2.4 rules的代码示例

rules: [
  // 详细loader配置
  // 不同文件必须配置不同loader处理
  {
    // 匹配哪些文件
    test: /\.css$/,
    // 使用哪些loader进行处理
    use: [
      // use数组中loader执行顺序：从右到左，从下到上 依次执行
      // 创建style标签，将js中的样式资源插入进行，添加到head中生效
      'style-loader',
      // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
      'css-loader'
    ]
  },
  {
    test: /\.less$/,
    use: [
      'style-loader',
      'css-loader',
      // 将less文件编译成css文件
      // 需要下载 less-loader和less
      'less-loader'
    ]
  }
]

注意事项：use数组中loader执行顺序：可以理解为从右到左或者从下到上 依次执行

下载版本为：

"css-loader": "^3.4.2",
"less": "^3.11.1",
"less-loader": "^5.0.0",
"style-loader": "^1.1.3"

运行webpack指令输出：

image.png

在build文件夹中创建一个index.html文件并引用构建后的built.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./built.js"></script>
  <title>Document</title>
</head>
<body>
  
</body>
</html>

用浏览器打开index.html 看效果，样式已经成功引入。同时你会发现我们的样式资源会以在head中添加style标签包裹的形式去添加。而且引用一次style-loader会添加一个style标签。

image.png

2.3 处理html资源

2.3.1 html-webpack-plugin

html-webpack-plugin 是一个用于生成 HTML 文件的 webpack 插件。它可以根据配置生成一个或多个 HTML 文件，并自动将打包后的资源文件（例如 JavaScript、CSS、图片等）注入到 HTML 中。

以下是 html-webpack-plugin 的一些常用配置选项：

  • template：指定模板文件的路径，用于生成 HTML 文件。
  • filename：指定生成的 HTML 文件的文件名，默认为 index.html。
  • title：指定 HTML 文件的标题。
  • favicon：指定 HTML 文件的 favicon 图标路径。
  • meta：指定要添加到 HTML 文件的 meta 标签。
  • chunks：指定要注入到 HTML 文件的 chunks（包含的 JavaScript 文件）。
  • minify：指定是否压缩生成的 HTML 文件。

基本使用

plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
]

打包前：

image.png 打包后：

image.png

配置了html-webpack-plugin插件后，它会自动以./src/index.html 为模板，创建一个index.html文件，并自动引用构建后的built.js 。

2.4 处理图片资源

2.4.1 url-loader

url-loader 是 webpack 中的一个加载器（loader），用于处理文件资源（例如图片、字体等）的导入和处理。它可以将文件转换为 base64 编码或将文件拷贝到输出目录，并返回文件的引用路径。

注意：它处理不了html文件中引用的图片资源。

url-loader 的一些常见配置选项：

  • limit：指定文件的大小阈值（以字节为单位）。如果文件大小小于该阈值，则会将文件转换为 base64 编码；如果文件大小大于等于该阈值，则会使用 fallback 配置指定的加载器进行处理。
  • fallback：指定文件大小超过阈值时使用的加载器。
  • name：指定生成的文件的文件名格式，可以使用占位符来指定文件名的规则。
  • outputPath：指定输出文件的路径，可以使用占位符来指定输出路径的规则。
  • publicPath：指定输出文件的公共路径，用于在生成的代码中引用文件。
  • esModule: 默认为true表示使用 ES 模块语法导出资源，false表示commonjs模块语法

指定版本

"url-loader": "^3.0.0",

2.4.2 html-loader

html-loader 是 webpack 中的一个加载器（loader），用于处理 HTML 文件的导入和处理。它可以解析 HTML 文件中的各种资源引用，如图片、样式表、脚本等，并根据配置对这些资源进行处理。 负责引入img，从而能被url-loader进行处理。它默认是commonjs模块解析。

指定版本

"html-loader": "^0.5.5"

2.4.3 图片资源基本处理

a.css代码示例

.box1 {
  background: url("./angular.jpg");
  background-repeat: no-repeat;
  width: 200px;
  height: 200px;
}
.box2 {
  width: 200px;
  height: 200px;
  background: url("./react.png");
  background-repeat: no-repeat;
}
.box3 {
  width: 200px;
  height: 200px;
  background: url("./vue.jpg");
  background-repeat: no-repeat;
}

index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>打包图片练习</title>
</head>
<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <img src="./angular.jpg" alt="angular">
</body>
</html>

index.js 代码示例

import './a.css'

代码中引入的图片资源

angular.jpg

react.png

vue.jpg

loader配置

rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        options: {
          limit: 8 * 1024,
          esModule: false,
          // hash:10 取生产hash值的10位，ext表示保留文件原先的 拓展名。
          name: '[hash:10].[ext]'
        }
      },
      {
        
        test: /\.html$/,
        loader: 'html-loader'
      }
    ]

2.5 处理其他资源

2.5.1 file-loader

file-loader 可以处理各种类型的文件，如图像、字体、音频、视频等。当遇到需要导入这些文件的模块时，file-loader 将把文件复制到输出目录，并返回文件在输出目录中的 URL 地址，以便在代码中引用。

常见的可选配置项：

  • name: 指定输出文件的名称格式。可以使用 [name]、[hash]、[ext] 等占位符来生成文件名。
  • outputPath: 指定输出文件的目录路径，相对于 webpack 输出目录。
  • publicPath: 指定在代码中引用文件时使用的公共路径。可以是相对路径或绝对路径。
  • context: 指定文件的上下文路径，默认为 webpack 配置的上下文路径。
  • esModule: 指定是否将模块导出为 ES 模块，默认为 true。设置为 false 可以强制导出为 CommonJS 模块。

2.5.2 loader配置

我们把其他资源放到最后处理

rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
          // 代码省略
      }
      // 打包其他资源(除了html/js/css资源以外的资源)
      {
        // 排除css/js/html资源
        exclude: /\.(css|js|html|less)$/,
        loader: 'file-loader',
        options: {
          name: '[hash:10].[ext]'
        }
      }
    ]

2.6 devServer

devServer 是 webpack 提供的开发服务器，它的作用是在开发环境中提供一个简单的服务器，用于快速开发和调试应用程序。它可以监听文件的变化，自动重新编译代码，并且支持热模块替换（Hot Module Replacement，HMR），实现页面无刷新更新。

以下是一些常见的 devServer 配置选项：

  • contentBase: 指定静态文件的根目录，默认为 webpack 输出目录。
  • compress: 是否启用压缩，默认为 false。设置为 true 时，会启用 gzip 压缩。
  • port: 指定服务器端口号，默认为 8080。
  • open: 是否自动打开浏览器，默认为 false。
  • hot: 是否启用热模块替换，默认为 false。
  • proxy: 配置代理，用于将请求代理到其他服务器。
  • historyApiFallback: 是否启用 HTML5 历史路由模式，默认为 false。当设置为 true 时，任意的 404 响应都会被替代为 index.html。

指定版本

"webpack-dev-server": "^3.10.3",

启动devServer指令为：

npx webpack-dev-server

配置示例：

const { resolve } = require("path");

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports= {
  entry: './src/index.js',
  output: {
    filename: 'built.js',
    path: resolve(__dirname, 'build'),
  },
  module: {
    rules: []
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',

  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true
  }
}
avatar
文章
阅读
粉丝