Webpack配置-经常使用loader

• Webpack核心概念

  1. Entry（入口): 入口文件配置。指示 webpack 应该使用哪一个模块，来做为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。默认是将src/index.js做为入口文件
  2. Output（出口）： 出口配置，指定打包完成后的文件叫什么名字放在哪一个文件夹内，默认在根目录下生成一个 dist文件夹，默认的打包文件名称是 main.js
  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 没有配置入口文件 配置完成以后打包成功
  2. 在配置文件中添加（推荐方式）
     webpack 默认会读取 webpack.config.js文件中的配置，若是须要自定义文件命令中添加参数配置便可配置规则以下
     

• 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文件会报出以下错误： 由于此时 webpack并不知道如何对其进行加载，因此提示须要制定对应的loader此时须要配置 css-loader因此他的做用就是帮助 webpack读取 css文件的 loader,安装后配置方法有两种
  1. 内联方式：在每一个 import 语句中显式指定 loader。
     import "css-loader!../css/index.css";
  2. 配置方式：在配置文件中配置 loader 配置完成以后 webpack就能加载 css文件了，打包也就成功了

• style-loader

  上文中说了 css-loader的用法，最终成功打包，可是运行时发现样式并无生效以下图： 缘由是 css-loader仅仅是对 css文件进行解析，并不会将解析后的 css插入到页面中，因此若是要让 css文件生效，就须要插入这个动做，此时就可使用 style-loader进行插入动做，首先第一步同上须要安装 style-loader，一样的仅仅只是开发使用，因此只须要安装开发依赖，命令以下：
  yarn add style-loader -D 配置方式和 css-loader相同以下图： 注意：由于loader的执行顺序是从右向左（或者说从下到上，或者说从后到前的），因此咱们须要将style-loader写到css-loader的前面；不然会报错（应为要先将 css加载出来以后再插入，若是没加载出来直接插入确定是不知道插入什么因此打包会报错），
  结果以下图:

• less-loader

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

• postcs-loader

  • browserslist

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

    1. 在package.json中配置

    2. 单独的一个配置文件.browserslistrc文件；

       若是没有配置 browserslist会有个默认的配置：

  • 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.css

  • 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

    • 配置 同 autoprefixer的配置方式

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