Webpack配置-常用loader

1,021 阅读7分钟
  • Webpack核心概念

    1. Entry(入口): 入口文件配置。指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。默认是将src/index.js作为入口文件
    2. Output(出口): 出口配置,指定打包完成后的文件叫什么名字放在哪个文件夹内,默认在根目录下生成一个 dist文件夹,默认的打包文件名称是 main.js image.png
    3. Loader(模块转换器)loader 可以用于对模块的源代码进行转换,将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。例如 css文件,可以将css文件也看成是一个模块,我们是通过import来加载这个模块的;在加载这个模块时,webpack其实并不知道如何对其进行加载,我们必须制定对应的loader来完成这个功能
    4. Plugins(插件)Plugin可以用于执行更加广泛的任务,比如打包优化、资源管理、环境变量注入等
    5. Module(模块): 开发者将程序分解成离散功能块,并称之为模块
  • Webpack默认入口文件以及输出文件夹、文件名

    上文提到配置入口及出口用的是 entry以及 output两个参数,配置的方法也有两种
    1. 在打包命令中添加参数(命令会比较长不易于读)
      命令如下:
      webpack --entry ./src/main.js --output-path ./build --output-filename build.js
      首先可以将 index.js文件改成 main.js 没有配置入口文件 image.png 配置完成之后打包成功 image.png
    2. 在配置文件中添加(推荐方式)
      webpack 默认会读取 webpack.config.js文件中的配置,如果需要自定义文件命令中添加参数配置即可配置规则如下
      image.png
  • loader概念以及配置方式

    借用官方文档的说明:

    loader 用于对模块的源代码进行转换。loader 可以使你在 import 或 "load(加载)" 模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的得力方式。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript 或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS 文件! 配置方式
    配置 module.rules是个数组并且允许我们配置多个 loader具体配置如下:

    1. rules是个数据然后数组中是每个 rule对象,对象中有多个属性
    2. rule对象中的 test属性,用于对 resource(资源)进行匹配的,通常会设置成正则表达式;
    3. rule对象中的 use属性 对应的值是个数组
      1. loader必须有一个 loader属性,对应的值是一个字符串;
      2. options可选的属性,值是一个字符串或者对象,值会被传入到loader中; 备注: 如果没有 options课直接写成 ['css-loader']
    4. loader属性,其实就是 use的缩写,如果只用到一个 loader并且没有 option的时候可以使用缩写形式
  • css-loader

    首先如要安装 css-loader 对应命令如下:
    yarn add css-loader -D
    应为仅仅是开发时需要所以只需要安装到开发环境依赖 如果没有使用 css-loader然后此时引入 css文件会报出如下错误: image.png 因为此时 webpack并不知道如何对其进行加载,所以提示需要制定对应的loader此时需要配置 css-loader所以他的作用就是帮助 webpack读取 css文件的 loader,安装后配置方法有两种
    1. 内联方式:在每个 import 语句中显式指定 loader
      import "css-loader!../css/index.css";
    2. 配置方式:在配置文件中配置 loader image.png 配置完成之后 webpack就能加载 css文件了,打包也就成功了
  • style-loader

    上文中说了 css-loader的用法,最终成功打包,但是运行时发现样式并没有生效如下图: image.png 原因是 css-loader仅仅是对 css文件进行解析,并不会将解析后的 css插入到页面中,所以如果要让 css文件生效,就需要插入这个动作,此时就可以使用 style-loader进行插入动作,首先第一步同上需要安装 style-loader,同样的仅仅只是开发使用,所以只需要安装开发依赖,命令如下:
    yarn add style-loader -D 配置方式和 css-loader相同如下图: image.png 注意:因为loader的执行顺序是从右向左(或者说从下到上,或者说从后到前的),所以我们需要将style-loader写到css-loader的前面;否则会报错(应为要先将 css加载出来之后再插入,如果没加载出来直接插入肯定是不知道插入什么所以打包会报错),
    结果如下图: image.png
  • less-loader

    在我们平常开发中经常会用到动态 css,所以就会有 lesssass等文件,但是这些预处理文件 webpack是不知道怎么加载的,同样的一些动态代码的写法浏览器也不支持的,所以就需要将 less文件先转成 css文件然后按照 css文件的打包流程打包即可 这里可以使用 less转换工具进行转换安装指令如下: yarn add less -D
    转换命令如下:
    npx less ./src/style/style.less > ./src/style/style1.css
    image.png
    发现此时就转换成功,但是当 css多了以后每个文件都这样执行以下很影响效率,此时就可以使用 less-loader,让他来帮我们转换
    首先安装 less-loader 命令如下:
    yarn add less-loader -D 然后在配置文件中配置
    image.png
  • postcs-loader

    • browserslist
      browserslist是在不同前端工具直接共用目标浏览器和 node版本的配置工具,使用到 browserslist的前端工具有:
      • Autoprefixer
      • Babel
      • postcss-preset-env
      • eslint-plugin-compat
      • stylelint-no-unsupported-browser-features
      • postcss-normalize
      • obsolete-webpack-plugin 使用该工具的时候一般会写一个类似与下面这种的配置文件: image.png 条件查询使用的是caniuse-lite的工具,这个工具的数据来自于caniuse的网站上;这些工具会根据我们的配置来获取相关的浏览器信息,以方便决定是否需要进行兼容性的支持,具体 browserslist编写规则等可以参考 github.com/browserslis…该网站,里面有详细的描述。 配置方式:
      1. 在package.json中配置 image.png

      2. 单独的一个配置文件.browserslistrc文件; image.png

        如果没有配置 browserslist会有个默认的配置: image.png

    • PostCSS工具
      PostCSS主要是一个使用 js来转换样式的工具,这个工具可以帮助我们进行一些 CSS的转换和适配,比如自动添加浏览器前缀,css样式重置;但是实现这些功能都需要相应的一些插件。
      • 使用方法:
        首先需要安装 postcss工具以及命令工具 postcss-cli
      • 安装命令
        yarn add postcss postcss-cli -D
      应为该工具需要借助一些插件来实现浏览器的兼容,所以具体的代码实现下文说完 autoprefixer后来代码实操
    • 插件autoprefixer
      就是postcss给代码添加前缀的一个插件
      • 安装命令
        yarn add autoprefixer -D
      • 使用方式
        npx postcss --use autoprefixer -o ./src/style/style-new.css ./src/style/style.cssimage.png
    • postcss-loader
      postcss-loader的作用类似于 less-loader,正式开发中有很多 css文件我们不可能每个文件都想上文中那样每个都用指令转换,所以此时 webpack中使用 postcss就可以借助 postcss-loader来处理
      • 安装 postcss-loader
        yarn add postcss-loader -D
      • 配置 postcss-loader
        1. package.json中配置
        2. postcss.config.js 或者 postcss.config.cjs 导出一个对象的 CommonJS 模块(推荐
    • postcss-preset-env
      一般的开发中如果使用了 postcss-loader一般都不会使用 autoprefixer插件而是直接使用 postcss-preset-env应为其内置就有自动帮助我们添加前缀同时它可以帮助我们将一些现代的CSS特性,转成大多数浏览器认识的CSS,并且会根据目标浏览器或者运行时环境添加所需的polyfill
      • 安装 postcss-preset-env
        yarn add postcss-preset-env -D

      • 配置 image.pngautoprefixer的配置方式

      • 举例 添加一个 HEXA的颜色值,如果仅仅是使用 autoprefixer插件效果如图: image.png 使用 postcss-preset-env插件: image.png 会转成浏览器都兼容的 rgba格式