webpack处理样式资源

#webpack处理样式资源| 来源: 网络整理| 查看: 265

初步配置

处理CSS资源 1.下载css-loader：

npm i css-loader style-loader -D

2.入口文件main.js中引入css资源：在这里插入图片描述 3.webpack.config.js加入loader的配置项：

const path = require("path"); module.exports={ entry:"./src/main.js", output:{ path:path.resolve(__dirname,"dist"), filename:"main.js", }, module:{ rules:[ //loader的配置 { test: /\.css$/i, use: ["style-loader", "css-loader"], } ] }, // 插件 plugins:[ // plugin的配置 ], mode:"development" }

运行一个页面，只引入打包后的JS文件，也会加载出CSS资源：插入了新的style标签分析：经过loader的处理，最终以新增style标签的形式完成了css资源的加载。实际上，loader的use配置项是从后往前使用执行的：先使用css-loader 将css资源编译成commonjs模块到 js 中然后通过style-loader 创建style标签添加到html文件中生效。

处理Less资源 1.如法炮制，下载安装less 和 less-loader

npm i less less-loader -D

2.rules中对less添加配置项

{ test: /\.less$/i, use: [ // compiles Less to CSS 'style-loader', 'css-loader', 'less-loader', //将less编译成css ], },

3.完成less样式书写并引入

处理Sass和Scss 1.安装sass和sass-loader

npm i sass sass-loader -D

2.rules中添加配置项

{ test: /\.s[ac]ss$/i, use: [ 'style-loader', 'css-loader', 'sass-loader', ], },

3.完成sass样式书写并引入

处理Stylus 1.安装stylus 和 stylus-loader

npm i style-loader -D

2.配置rules

{ test: /\.styl$/, loader: "stylus-loader", // 将 Stylus 文件编译为 CSS },

3.书写styl文件,完成stylus样式书写并引入

使用OneOf

如果存在多种样式的css资源，那么这些rules配置项会累在一起，webpack处理每个资源时会依次遍历匹配你所写的所有文件名后缀规则。

这个时候可以使用oneOf进行提升匹配速度，即每个文件只能被一个loader配置，已经匹配上了规则就切换对下一个资源的配置。所以推荐的基础配置文件如下：

const path = require("path"); module.exports={ entry:"./src/main.js", output:{ path:path.resolve(__dirname,"dist"), filename:"main.js", }, module:{ rules:[ { oneOf:[ { test: /\.css$/i, use: ["style-loader", "css-loader"], }, { test: /\.less$/i, use: [ 'style-loader', 'css-loader', 'less-loader', ], }, { test: /\.s[ac]ss$/i, use: [ 'style-loader', 'css-loader', 'sass-loader', ], }, ] } ] }, plugins:[ // plugin的配置 ], mode:"development" }

【本文地址】

公司简介

联系我们