Guidebook

# Lastest version of Webpack4 loaders

# loader使用规则

loader 从右到左（或从下到上）地取值(evaluate)/执行(execute)

# 使用loader

{ test: /\.vue$/, loader: 'vue-loader' } // loader属性
// 使用use
{
        test: /\.css$/,
        use: [
          // [style-loader](/loaders/style-loader)
          { loader: 'style-loader' },
          // [css-loader](/loaders/css-loader)
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          // [sass-loader](/loaders/sass-loader)
          { loader: 'sass-loader' }
        ]
      }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# webpack打包vue文件

需要使用vue-loader (opens new window)

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  module: {
    rules: [{ test: /\.vue$/, loader: 'vue-loader' }],
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}
1
2
3
4
5
6
7
8
9
10

# 自动构建

最后在package.json的script中添加

"scripts": {
    "dev": "webpack ./src/main.js --mode development --config ./build/webpack.config.js -o dist"
  },
1
2
3

# 处理css

# style-loader

npm (opens new window)

{ test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }
1

# css-loader

Webpack (opens new window)

css-loader和style-loader的区别 ===> https://blog.csdn.net/wu_xianqiang/article/details/104560613

# sass

使用 style-loader css-loader sass-loader

yarn add style-loader css-loader sass-loader -D
1
{
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          !IS_PRODUCTION
              ? {
                  loader: 'style-loader',
                  options: {
                    esModule: true
                  }
                }
              : MiniCssExtractPlugin.loader,
          // Translates CSS into CommonJS
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  ['postcss-preset-env',{
                    // 其他选项
                  },],
                ],
              },
            },
          },
          // Compiles Sass to CSS
          'sass-loader',
        ],
      },
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

# postcss-preset-env

PostCSS Preset Env (opens new window)允许您将现代 CSS 转换为大多数浏览器可以理解的内容，根据您的目标浏览器或运行时环境确定您需要的polyfill (opens new window)。

# Babel处理js文件

# Babel-loader

webpack doc (opens new window)

This package allows transpiling JavaScript files using Babel (opens new window) and webpack (opens new window).

yarn add babel-loader @babel/core @babel/preset-env -D
1

babel.config.js

module.exports = {
  presets: [
    ["@babel/preset-env",
    	{ useBuiltIns: 'usage', corejs: 3, modules: false }
    ]
  ]
}
1
2
3
4
5
6
7
8

# 处理图片

# webpack5

https://webpack.docschina.org/guides/asset-modules/#resource-assets

在 webpack 5 之前，通常使用：

webpack5 可以使用assets module

{ test: /\.(jpeg|png)/i, type: 'asset/resource' }
1

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

小于8kb的图片会被转成base64字符串---inline

asset/inline

会被转换为base64字符串

可以自定义URI生成器

# webpack4

{
  test: /\.(png|svg|jpe?g)$/i,
  loader: 'url-loader',
  options: {
    esModule: false
  }
},
{
  test: /\.(woff|woff2|eot|ttf|otf)$/i,
  loader: 'file-loader',
  options: {
    esModule: false
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 压缩svg

# mini-svg-data-uri

npm (opens new window)

# 打包后网站ico图标丢失

原因是打包时没有将ico图标文件复制到dist目录内

使用CopyWebpackPlugin

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, 'dist'),
    // ...
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, '../public/favicon.ico'),
          to: path.resolve(__dirname, '../dist/')
        }
      ],
    }),
  ],
  // ...
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

← 记一次从webpack3迁移到webpack4遇到的问题 →