webpack 中的加載器

1. 通過 loader 打包非 js 模塊

在實際開發過程中，webpack 默認只能打包處理以 .js 后綴名結尾的模塊，其他非 .js 后綴名結尾的模塊，

webpack 默認處理不了，需要調用 loader 加載器才可以正常打包，否則會報錯！

2. loader 的調用過程

---

---

webpack 中加載器的基本使用

---

---

1. 打包處理 css 文件

① 運行 npm i style-loader css-loader -D 命令，安裝處理 css 文件的 loader ② 在 webpack.config.js 的 module -> rules 數組中，添加 loader 規則如下：

// 所有第三方文件模塊的匹配規則

module: {

? ? rules: [

? ? ? { test: /\.css$/, use: ['style-loader', 'css-loader'] }

? ?]

}

其中，test 表示匹配的文件類型， use 表示對應要調用的 loader 注意： ? use 數組中指定的 loader 順序是固定的 ? 多個 loader 的調用順序是：從后往前調用

---

---

2. 打包處理 less 文件 ① 運行 npm i less-loader less -D 命令

---

---

3. 打包處理 scss 文件

① 運行 npm i sass-loader node-sass -D 命令

---

---

module: {rules: [{ test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },{ test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=16941' },{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }]}

?

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的webpack 中的加载器简介||webpack 中加载器的基本使用——1. 打包处理 css 文件 2. 打包处理 less 文件 3.打包处理 scss 文件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。