上一篇文章 体验了webpack的打包过程，其中js文件不须要咱们手动配置就能够胜利解析，可其它类型的文件，比方css、less呢？

css-loader

首先，创立一个空文件夹，通过 npm init -y 初始化我的项目，我的项目构造如下

demo├─ src│   ├─ css│   │   └─ index.css│   ├─ js│   │  └─ component.js│   └─ index.js├─ index.html└─ package.json

在component.js 中创立一个div元素并设置class，index.css 中 定义款式，最初在 index.js 中引入 component.js 及 index.css 文件

// component.jsconst divEl = document.createElement("div");const text = document.createTextNode("hello webpack");divEl.appendChild(text);divEl.setAttribute("class", "element");document.body.appendChild(divEl);// index.css.element {  font-size: 20px;  font-weight: bold;}// index.jsimport "./js/component";import "./css/index.css";

在package.json 中配置 build 指令后，应用 npm run build 运行我的项目

但此时是不能被编译通过，它报错提醒“You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.”

用于解决css资源的loader是css-loader。npm i css-loader -D 在我的项目中装置后，在我的项目根目录新建 webpack.config.js 文件，在 module 对象中 rules 里配置，test 通过正则表达式匹配文件后缀，use 示意应用的 loader。

const path = require("path");module.exports = {  entry: "./src/index.js",  output: {    path: path.resolve(__dirname, "dist"),    filename: "bundle.js",  },  module: {    rules: [      {        test: /\.css$/,        use: ["css-loader"],      },    ],  },};

再次 npm run build 运行我的项目，此时曾经能够编译通过了~

index.html 引入打包后的 bundle.js，通过 Live Server 运行 html 文件

style-loader

能够在html页面中看到 div 标签，但 css 没有失效，这是因为 css-loader 只负责解析 css，但不会将 css 插入到页面中，这个操作须要 style-loader 来实现。

通过 npm i style-loader -D 装置后，在 webpack.config.js 中配置。

对于 css 文件，须要先通过 css-loader 解析后再通过 style-loader 插入页面。而 loader 的执行程序是从后往前，所以 style-loader 放在 css-loader 后面。

module: {    rules: [      {        test: /\.css$/,        use: ["style-loader", "css-loader"],      },    ],  },

此时 css 文件中的款式就能够失效啦，能够看到 style-loader 的作用就是创立了一个 style 标签，并将 css-loader 解析完的 css 内容插入

less-loader

在 css 文件夹下减少一个 index.less 文件，在 index.js 中引入

// index.less@color: red;.element {  color: @color;}// index.jsimport "./css/index.less";

运行后同样会提醒没有适合的loader

解决 less文件应用 less-loader，但实际上 less-loader 须要借助 less 这个工具，间接通过 less 工具就能够将 less 文件里的代码解决为浏览器可辨认的 css 代码

执行 npx less ./src/css/index.less > ./src/css/revert.css 命令应用 less 工具将 index.less 文件解析成 revert.css

在webpack.config.js中只须要将 less-loader 配置上就行，less-loader 须要最先将 less 资源解决成 css ，所以搁置最初面

 module: {    rules: [      {        test: /\.css$/,        use: ["style-loader", "css-loader"],      },      {        test: /\.less$/,        use: ["style-loader", "css-loader", "less-loader"],      },    ],  },

从新编译后就能够浏览器上看到less设置的款式失效啦，以及 css 和 less 别离应用 style-loader 创立了两个 style 标签。

PostCSS

PostCSS是一个通过JavaScript来转换款式的工具，帮忙咱们进行一些CSS的转换和适配，比方主动增加浏览器前缀、css款式的重置，然而PostCSS不能间接实现，须要借助对应的插件。

比方以下css代码，某些浏览器可能不兼容，本人手动增加浏览器前缀使之兼容也能够，但太过麻烦，而且也不晓得须要兼容哪些版本的浏览器，应用工具是比拟好的计划。

.content {  user-select: none;  color: #12345678;  transition: all 2s ease;}

通过 postcss-cli 能够对文件进行解析解决，通过指令 npx postcss -o result.css ./src/css/component.css 进行编译

尽管编译没有报错，然而编译后并没有对文件进行兼容解决，因为没有指定插件，别离指定两种插件，来看看编译后果

npx postcss --use autoprefixer -o autoprefixer.css ./src/css/component.cssnpx postcss --use postcss-preset-env -o preset.css ./src/css/component.css

autoprefixer 只负责减少浏览器前缀
postcss-preset-env css做转换，如16进制色彩转换成rgb，并且内置了autoprefixer

postcss-loader

在webpack环境下，应用postcss-loader来对css进行兼容性的解决，同时须要配置插件， autoprefixer 和 postcss-preset-env 都能够。

{    test: /\.css$/,    use: [      "style-loader",      "css-loader",      {        loader: "postcss-loader",        options: {          postcssOptions: {            plugins: [require("postcss-preset-env")],          },        },      },    ],  },

增加前缀和款式转换后的代码就能够被增加到浏览器中

browsersList

通过postcss对css代码兼容性进行了解决，但咱们能够看到下面定义了css3中的属性 transition，某些浏览器有可能存在兼容性问题，但在这里没有增加浏览器前缀。

这是因为没有指定浏览器兼容版本，对于编译反对的浏览器版本采取了默认配置，默认配置中的浏览器曾经都可能反对 transition 属性。

咱们能够通过 browsersList 来指定浏览器兼容性版本，可配置在 package.json 或者 .browserslistrc 文件中

> 0.1%,last 4 version,not dead

.browserslistrc 文件配置示意浏览器使用率大于0.1%，每个浏览器的最初四个版本、以及没有“死亡”的浏览器，扩充了须要兼容的浏览器版本。

此时编译后的代码就会帮咱们增加浏览器前缀。

webpack解决款式资源，通过 css-loader、style-loader 解析 css 语法browsersList、postcss 形式，解决兼容性问题。

以上是和款式资源无关的编译配置，更多无关webpack的内容能够参考我其它的博文，继续更新中~