资源处理 | howcode

# 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',
      filename:'app.html', //打包后的名称
      // 指定 Script 标签位置
      inject: 'body'
    })
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

官方说明：https://webpack.docschina.org/plugins/html-webpack-plugin/
配置选项：https://github.com/jantimon/html-webpack-plugin#options

# 样式资源

# 打包 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'
        ]
      }
    ]
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在 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'
        ]
      }
    ]
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在 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'
    })
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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

官方文档：https://webpack.docschina.org/plugins/mini-css-extract-plugin
视频教程：https://www.bilibili.com/video/BV1YU4y1g745?p=30

# 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({
          filename:'styles/[contenthash].css'
      })
    ],
  },
  // 模式
  mode: 'production'
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

官方文档：https://webpack.docschina.org/plugins/css-minimizer-webpack-plugin/

# 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",
      {
        // 其他选项
      },
    ],
  ],
};

1
2
3
4
5
6
7
8
9
10

引用模块

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'
    })
  ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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"
    ]
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

视频教程：https://www.bilibili.com/video/BV1e7411j7T5?p=13
视频教程：https://www.bilibili.com/video/BV1YU4y1g745?p=67

# 图片资源

下载图片处理解析器

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;
}

1
2
3
4
5
6
7
8
9
10
11

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 数据资源

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

视频教程：https://www.bilibili.com/video/BV1YU4y1g745?p=33

# 自定义 JSON 资源

安装

npm install toml yaml json5 -D

新增配置

module.exports = {
  ...
  module: {
    rules: [
      {
        // 监听资源文件
        test: /\.json5/,
        // 设置资源类型
        type: 'json',
        parser:{
            parse:json5.parse
        }
      },
      {
        // 监听资源文件
        test: /\.toml/,
        // 设置资源类型
        type: 'json',
        parser:{
            parse:toml.parse
        }
      },
      {
        // 监听资源文件
        test: /\.yaml/,
        // 设置资源类型
        type: 'json',
        parser:{
            parse:yaml.parse
        }
      }
    ]
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

视频教程：https://www.bilibili.com/video/BV1YU4y1g745?p=34

# JS 资源

# JS 语法检查

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

npm i eslint -D

创建配置文件，根据提示选择需要的类型。配置完成后，将在 node_modules 文件夹中生成一个 .eslintrc.json 文件，将文件复制到根目录下。

npx eslint --init

在 VSCode 中安装扩展 Eslint ，重启软件后将自动生效。

# JS 兼容处理

将 ES6 代码转换为低版本 ES 代码安装模块

babel-loader：在 webpack 里应用 babel 解析 ES6 的桥梁
@babel/core： babel 核心模块
@babel/preset-env： babel 预设，一组 babel 插件的集合

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

在 package.json 中配置

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.m?js$/,
        // 排除 node_modules 中安装的库
        exclude: /(node_modules|bower_components)/,
        use: {
          // 加载 loader
          loader: 'babel-loader',
          options: {
            // 配置预设
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

视频教程：https://www.bilibili.com/video/BV1YU4y1g745?p=36

# regeneratorRuntime

regeneratorRuntime 是 webpack 打包生成的全局辅助函数，由 babel 生成，用于兼容 async/await 的语法。安装

npm i @babel/runtime @babel/plugin-transform-runtime -D

配置

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.m?js$/,
        // 排除 node_modules 中安装的库
        exclude: /(node_modules|bower_components)/,
        use: {
          // 加载 loader
          loader: 'babel-loader',
          options: {
            // 配置预设
            presets: ['@babel/preset-env']
            plugins: [
              [
                '@babel/plugin-transform-runtime'
              ]
            ]
          }
        }
      }
    ]
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# JS 压缩

安装插件 terser-webpack-plugin

npm i terser-webpack-plugin -D

配置

const TerserWebpackPlugin = require("terser-webpack-plugin")

module.exports = {
  ...
  optimization: {
    minimizer: [
      // 使用插件压缩 js 代码 (生产模式)
      new TerserWebpackPlugin()
    ]
  }
}

1
2
3
4
5
6
7
8
9
10
11

——暂无评论——