biu biu biu coding

webpack

javascript webpack settings
字数统计: 1.1k阅读时长: 4 min
2020/09/17 Share

webpack 常用loader & plugin

说明：
plugin相当于生命周期一样，在webpack运行到某个时刻的时候做一些事情。

汇总

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
{
  "name": "webpack-test", // 项目名称
  "version": "1.0.0", // 当前版本
  "description": "", // 项目描述
  "main": "index.js", // 需要暴露出去的入口
  "private": true, // 是否私有 是否发布到npm上
  "scripts": { // npm指令
    ...
  },
  "author": "", // 开发者
  "license": "ISC" // 开源MIT
  "dependencies": {

  },
  "devDependencies": {
    "webpack": 使用webpack必备,
    "webpack-cli": 使用webpack命令,
    "file-loader": 打包图片(不推荐，使用更高级的loader),
    "url-loader": 打包图片(file-loader的升级版本),
    "css-loader": 打包css类文件,
    "style-loader": 打包css类文件，css-loader的下一步处理,
    "scss-loader": 处理scss类文件，处理完再经过css-loader处理,
    "autoprefixer": 处理css使之添加浏览器前缀,
    "html-webpack-plugin": 在打包结束后, 自动生成html文件,
    "clean-webpack-plugin": 在打包前。将dist清空,

  }
}

webpack

webpack is a bundler for modules 模块打包工具。使之可支持ES Module，CommonJS，CMD，AMD。

webpack-cli

可以使我们在命令行中得意操作webpack指令。

file-loader

1.打包图片资源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  ...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          // 设置打包图片的文件名
          name: '[name].[ext]', // name未打包之前的文件名 ext未打包文件的后缀名字
          // 打包图片到哪
          outputPath: 'imgs/'
        }
      }
    ]
  },
  ...
}

2. 打包字体文件

1
2
3
4
5
6
7
8
9
10
11
12
13
{
  ...
  module: {
    rules: [
      {
        test: /\.(eot|ttf|svg)$/,
        use: {
          loader: 'file-loader'
        }
      }
    ]
  }
}

url-loader

将图片(较小的)转化为base64格式，打包进js，而较大的则打包成文件。是file-loader的升级版。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  ...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        exclude: [resolve('src/components/icons')], // 针对某个范围下的图片进行处理
        options: {
          limit: 2048, // 小于2kb 则转化为base64
          name: '[name].[ext]'
        }
      },
    ]
  }
  ...
}

css-loader & style-lader

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
{
  ...
  module: {
    rules: [
      {
        text: /\.css$/,
        use: ['style-loader', 'css-loader']
      }，
      {
        text: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2, // 作用域@import引入的css文件
              modules: true // 启用cssModules模式
            }
          }，
          'scss-loader', // 特定的css类文件 就引入特定的loader包
          'postcss-loader' // 见下postcss-loader介绍
        ]
      }
    ]
  }
  ...
}

1. importLoaders配置

假如一个scss文件中又引入另一个scss文件，如果不加配置，则只经过css-loader->style-loader处理，如果添加importLoaders: 2，表示通过@import引入的样式文件，至少通过之前的两个loader处理，即postcss-loader->scss-loader->css-loader->style-loader。

2. modules

设置modules: true开启css模块化，避免产生css样式互相影响。

1
2
3
4
5
6
7
import style from './index.css';

var img = new Image();
img.src = 'xxxxx';
img.classList.add(style);

document.getElementById('root').append(img);

postcss-loader

打包css的样式时，进行预处理，可通过postcss.config.js配置。

使用autoprefixer，打包css3新特性时会带上浏览器兼容的前缀。

1
2
3
4
5
6
// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

html-webpack-plugin

打包结束后，自动生成html，并自动将打包生成的js引入到这个html文件中。

1
2
3
4
5
6
7
8
9
const HtmlWebpackPlugin = require('html-webpack-plugin');

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

1. template

template配置默认模版，将以这个html文件(src/index.html)为基础进行打包，src/index.html中的定制化结构都会打包到新的html中。

clean-webpack-plugin

1
2
3
4
5
6
7
8
9
10
const CleanWebpackPlugin = require('clean-webpack-plugin');

非官方的第三方插件，在webpack**打包前**将dist目录清空。

module.exports = {
  plugins: [
    new HtmlWebpackPlugin(...),
    new CleanWebpackPlugin()
  ]
}

问题汇总

1. 为什么项目下安装webpack，运行webpack报错找不到？

1
2
webpack -v
command not found: webpack

原因：
因为默认从全局环境查找webpack, 因为我们并没有从全局安装webpack所以报错。如果是package.json中scripts指令执行，则不会出现这个问题，因为默认优先从工程中查找webpack包。

解决：
使用npx指令

1
npx webpack -v

2. 直接修改webpack.config.js文件名，不能正常打包

原因：
webpack指令默认查询的webpack.config.js，如果想执行正常操作需要通过--config修改指令。

解决：

1
webpack --config 你修改后的文件路径

3. webpack警告The 'mode' option has not been set, ....

原因：
在webpack.config.js中没有设置对应的mode

解决：

1
2
3
4
5
modules.exports = {
  ...
  mode: production // production | development
  ...
}

4. rules中多个loader使用use处理的机制

use的值是一个数组，秉承从下到上，从右往左执行的机制，比如 use: ['style-loader', 'css-loader']，一定是先经过css-loader处理，再经过style-loader处理。

原文作者：Febcat

原文链接：https://febcat.github.io/2020/09/17/webpack/

发表日期：September 17th 2020, 2:12:58 pm

更新日期：September 19th 2020, 3:36:18 pm

版权声明：本文采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可

CATALOG
  1. 1. webpack 常用loader & plugin
    1. 1.1. 汇总
    2. 1.2. webpack
    3. 1.3. webpack-cli
    4. 1.4. file-loader
      1. 1.4.1. 1.打包图片资源
      2. 1.4.2. 2. 打包字体文件
    5. 1.5. url-loader
    6. 1.6. css-loader & style-lader
      1. 1.6.1. 1. importLoaders配置
      2. 1.6.2. 2. modules
    7. 1.7. postcss-loader
    8. 1.8. html-webpack-plugin
      1. 1.8.1. 1. template
    9. 1.9. clean-webpack-plugin
    10. 1.10. 问题汇总
      1. 1.10.1. 1. 为什么项目下安装webpack，运行webpack报错找不到？
      2. 1.10.2. 2. 直接修改webpack.config.js文件名，不能正常打包
      3. 1.10.3. 3. webpack警告The 'mode' option has not been set, ....
      4. 1.10.4. 4. rules中多个loader使用use处理的机制
Total : 7
2021
2020
2019
git javascript React SSR Vue webpack settings
bugfix web server