webpack.config.js 是 webpack 的配置文件。
作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）
所有构建工具都是基于 nodejs 平台运行的，模块化默认采用 commonjs。

开发环境配置(总)

开发环境配置主要是为了能让代码运行。主要考虑以下几个方面：

  • 打包样式资源 npm i css-loader style-loader less-loader less -D
  • 打包 html 资源 npm install --save-dev html-webpack-plugin
  • 打包图片资源 npm install --save-dev html-loader@0.5.5 url-loader file-loader
    • webpack5.0可以使用内置的 Asset Modules，css文件像 background 和 icon 这样的图像无需**url-loader file-loader**
    • webpack5.0 依然需要html-loader解析html中img
  • 打包其他资源 npm install --save-dev file-loader
    • webpack5.0使用 Asset Modules 可以加载任何类型的文件，也包括字体。 test: /.( woff | woff2 | eot | ttf | otf )$/i
  • 开发服务器 devServer：用来自动化，不用每次修改后都重新输入webpack打包一遍（自动编译，自动打开浏览器，自动刷新浏览器）: npm install webpack-dev-server -D
    • 注意事项
      • 先执行webpack打包生成代码到dist 否则会报错,因为server指定文件时dist
      • 因为是本地运行没有全局安装 所以要使用npx,而webpack 是全局安装所以webpack即可
      • 出现下图错误时因为npx时 全局的webpack找不到 devServer，所有要本地安装一下webpack和webpack-cli，再执行npx…
      • image.png
      • 4.0运行 npx webpack-dev-server
      • 5.0运行 npx webpack serve或4.0那个都可以 加—open打开浏览器

下面是一个简单的开发环境webpack.confg.js配置文件

  1. /*
  2.   webpack.config.js  webpack的配置文件
  3.     作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）
  5.     所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。
  6. */
  8. // resolve用来拼接绝对路径的方法
  9. const { resolve } = require('path');
  10. const HtmlWebpackPlugin = require('html-webpack-plugin');
  12. module.exports = {
  13.   // webpack配置
  14.   // 入口起点
  15.   entry: './src/index.js',
  16.   // 输出
  17.   output: {
  18.     // 输出文件名
  19.     filename: 'built.js',
  20.     // 输出路径
  21.     // __dirname nodejs的变量，代表当前文件的目录绝对路径
  22.     path: resolve(__dirname, 'build')
  23.   },
  24.   // loader的配置
  25.   module: {
  26.     rules: [
  27.       // 详细loader配置
  28.       // 不同文件必须配置不同loader处理
  29.       {
  30.         // 匹配哪些文件
  31.         test: /\.css$/,
  32.         // 使用哪些loader进行处理
  33.         use: [
  34.           // use数组中loader执行顺序：从右到左，从下到上 依次执行
  35.           // 创建style标签，将js中的样式资源插入进行，添加到head中生效
  36.           //后边提取css文件会去掉这个loader
  37.           'style-loader',
  38.           // 将css文件变成commonjs模块加载js中，里面内容是样式字符串
  39.           'css-loader'
  40.         ]
  41.       },
  42.       {
  43.         test: /\.s[ac]ss$/i,
  44.         use: [
  45.           // 将 JS 字符串生成为 style 节点
  46.           'style-loader',
  47.           // 将 CSS 转化成 CommonJS 模块
  48.           'css-loader',
  49.           // 将 Sass 编译成 CSS
  50.           'sass-loader',
  51.         ],
  52.       },
  53.       {
  54.         // url-loader：处理图片资源，问题：默认处理不了html中的img图片
  55.         test: /\.(jpg|png|gif)$/,
  56.         // 需要下载 url-loader file-loader
  57.         loader: 'url-loader',
  58.         options: {
  59.           // 图片大小小于8kb，就会被base64处理，优点：减少请求数量（减轻服务器压力），缺点：图片体积会更大（文件请求速度更慢）
  60.           // base64在客户端本地解码所以会减少服务器压力，如果图片过大还采用base64编码会导致cpu调用率上升，网页加载时变卡
  61.           limit: 8 * 1024,
  62.           // 给图片重命名，[hash:10]：取图片的hash的前10位，[ext]：取文件原来扩展名
  63.           name: '[name].[hash:10].[ext]',
  64.           // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是conmonjs，解析时会出问题：[object Module]
  65.           // 解决：关闭url-loader的es6模块化，使用commonjs解析
  66.           esModule: false,
  67.           //指定打包路径
  68.           outputPath: 'imgs',
  69.         },
  70.       },
  71.       {
  72.         test: /\.html$/,
  73.         //@0.5.5 否则图片打不开
  74.         // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
  75.         loader: 'html-loader',
  76.       },
  77.       {
  78.         // 排除html|js|css|less|jpg|png|gif文件
  79.         exclude: /\.(html|js|css|scss|jpg|png|gif)$/,
  80.         // file-loader：处理其他文件
  81.         loader: 'file-loader',
  82.         options: {
  83.           name: '[hash:10].[ext]',
  84.           outputPath: 'media',
  85.         },
  86.       }
  87.     ]
  88.   },
  89.   // plugins的配置
  90.   plugins: [
  91.      // plugins的配置
  92.     // html-webpack-plugin
  93.     // 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）
  94.     // 需求：需要有结构的HTML文件
  95.     new HtmlWebpackPlugin({
  96.       // 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）
  97.       template: './src/index.html',
  98.       filename:'app.html'
  99.       //script标签放置的位置
  100.       inject:'body'
  101.     })
  102.   ],
  103.   // 模式
  104.   mode: 'development', // 开发模式
  105.   // mode: 'production',
  106.   // 开发服务器 devServer：用来自动化，不用每次修改后都重新输入webpack打包一遍（自动编译，自动打开浏览器，自动刷新浏览器）
  107.   // 特点：只会在内存中编译打包，不会有任何输出（不会像之前那样在外面看到打包输出的build包，而是在内存中，关闭后会自动删除）
  108.   // 启动devServer指令为：npx webpack-dev-server
  109.   devServer: {
  110.     // 项目构建后路径
  111.     //contentBase: resolve(__dirname, 'build'),//4.0
  112.     static: resolve(__dirname, 'build'),//5.0
  113.     // 启动gzip压缩
  114.     compress: true,
  115.     // 端口号
  116.     port: 3000,
  117.     // 自动打开浏览器
  118.     open: true,
  119.   },
  120. }

其中，大部分配置都在注释中给出解释。

  • 运行项目的两个指令：
    webpack 会将打包结果输出出去（build文件夹）
    npx webpack-dev-server 只会在内存中编译打包，没有输出
  • loader 和 plugin 的不同：（plugin 一定要先引入才能使用）loader：1. 下载 2. 使用（配置 loader）plugins：1.下载 2. 引入 3. 使用

image.png

资源模块

资源模块(asset module)是一种模块类型，它允许我们应用Webpack来打包其他资 源文件（如字体，图标等）
资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：

  • asset/resource 发送一个单独的文件并导出 URL。
  • asset/inline 导出一个资源的 data URI。
  • asset/source 导出资源的源代码。
  • asset在导出一个 data URI 和发送一个单独的文件之间自动选择。

    resource 资源

    ```javascript module: { rules: [{ test: /.png/, type: ‘asset/resource’ }] },
  1. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/1624878/1637902321088-fb7c2842-f267-486b-b6b7-4220c7e147f7.png#clientId=ubcd77f94-c9dc-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=134&id=u1460e615&margin=%5Bobject%20Object%5D&name=image.png&originHeight=267&originWidth=478&originalType=binary&ratio=1&rotation=0&showTitle=false&size=45008&status=done&style=none&taskId=u6dbce0a8-2e62-4f4b-9651-ef04166b2a9&title=&width=239)
  2. <a name="e3bUe"></a>
  3. ####  自定义输出文件名 
  4.  默认情况下， asset/resource 模块以 [contenthash][ext][query] 文件名 发送到输出目录。   
  5. ```javascript
  6. output: {
  7.     assetModuleFilename: 'images/[contenthash][ext][query]'
  8. },

另一种自定义输出文件名的方式是，将某些资源发送到指定目录，修改配置： 

  1. rules: [{
  2.   test: /\.png/,
  3.   type: 'asset/resource',
  4.   // 优先级高于 assetModuleFilename
  5.   generator: {
  6.       filename: 'images/[contenthash][ext][query]'
  7.   }
  8. }]

inline 资源

  1. module: {
  2.   rules:[
  3.     {
  4.       test: /\.svg/,
  5.       type: 'asset/inline'
  6.     }
  7.   ],
  8. }

启动服务
image.png

自定义 data URI 生成器

webpack 输出的 data URI，默认是呈现为使用 Base64 算法编码的文件内容。 如果要使用自定义编码算法，则可以指定一个自定义函数来编码文件内容。
npm install mini-svg-data-uri -D

  1. const svgToMiniDataURI = require('mini-svg-data-uri')
  2. rules: [
  3.   {
  4.     test: /\.svg/,
  5.     type: 'asset/inline',
  6.     generator: {
  7.     dataUrl: content => {
  8.       content = content.toString();
  9.           return svgToMiniDataURI(content);
  10.       }
  11.     }
  12.   }
  13. ]

image.png

source 资源

source资源，导出资源的源代码。 

  1. module: {
  2.   rules: [
  3.     test: /\.txt/,
  4.     type: 'asset/source'
  5.   ]
  6. }

所有 .txt 文件将原样注入到 bundle 中。

asset 通用资源类型

通用资源类型 asset , 在导出一个 data URI 和发送一个单独的文件之间自动选择 

  1. module: {
  2.   rules: [
  3.     test: /\.jpg/,
  4.     type: 'asset'
  5.   ]
  6. }

现在，webpack 将按照默认条件，自动地在 resource 和 inline 之间进行选择： 小于 8kb 的文件，将会视为 inline 模块类型，否则会被视为 resource 模块类型。 

  1. rules: [
  2.   {
  3.     test: /\.jpg/,
  4.     type: 'asset',
  5.     parser: {
  6.       //修改默认8kb 为4kb
  7.       dataUrlCondition: {
  8.           maxSize: 4 * 1024 // 4kb
  9.       }
  10.     }
  11.   }
  12. ]

image.png