webpackd的 loader 加載器的配置彙總

下面彙總了一些平常開發會使用到的加載器的配置放下，請繼續往下看

打包處理css文件

1.在終端中運行以下命令，安裝處理 css 文件的加載器

npm install style-loader css-loader -D

2.打開 webpack.config.js，新建一個 module 節點並配置，配置內容以下：

// 全部第三方文件模塊的匹配規則
module: {
    rules: [
        { test: /\.css$/ ,use:['style-loader','css-loader']}
    ]
}
//其中 test 表示 匹配文件類型，use 表示對應要調用的 loader
// 其中須要注意：
// use 數組中指定的 loader 順序是固定的
// 多個 loader 的調用順序是 從後往前調用的

打包處理less文件

1.在終端中運行以下命令，安裝處理 less 文件的加載器

npm install less-loader less -D

2.打開 webpack.config.js ，修改 module -> rules 數組(原數組內容不動)，新增規則以下：

// 全部第三方文件模塊的匹配規則
module: {
    rules: [
        { test: /\.less$/ ,use:['style-loader','css-loader','less-loader']}
    ]
}
//其中 test 表示 匹配文件類型，use 表示對應要調用的 loader
// 其中須要注意：
// use 數組中指定的 loader 順序是固定的
// 多個 loader 的調用順序是 從後往前調用的

配置 postCSS 自動添加 css 的兼容前綴

1.在終端中運行以下命令，安裝包

npm install postcss-loader autoprefixer -D

2.在根目錄建立 postcss 的配置文件，命名爲 postcss.config.js ，配置內容以下：

const  autoprefixer = require('autoprefixer')//導入自動添加前綴的插件
module.exports = {
    plugin: [ autoprefixer ] //掛載插件
}

3.打開 webpack.config.js 文件，找到 module -> rules 數組，修改 css 的 loader 規則，修改內容以下：

// 全部第三方文件模塊的匹配規則
module: {
    rules: [
        { test: /\.css$/ ,use:['style-loader','css-loader','postcss-loader']}
    ]
}
//其中 test 表示 匹配文件類型，use 表示對應要調用的 loader

打包處理scss文件

1.在終端中運行以下命令，安裝處理 scss 文件的加載器

npm install sass-loader node-sass -D

2.打開 webpack.config.js ，修改 module -> rules 數組(原數組內容不動)，新增規則以下：

// 全部第三方文件模塊的匹配規則
module: {
 rules: [
{ test: /\.scss$/ ,use:['style-loader','css-loader','sass-loader']}
]
}
//其中 test 表示 匹配文件類型，use 表示對應要調用的 loader
// 其中須要注意：
// use 數組中指定的 loader 順序是固定的
// 多個 loader 的調用順序是 從後往前調用的

打包處理樣式表中的圖片和字體文件

1.在終端中運行以下命令，安裝相關的加載器

npm install url-loader file-loader -D

2.打開 webpack.config.js ，修改 module -> rules 數組(原數組內容不動)，新增規則以下：

// 全部第三方文件模塊的匹配規則
module: {
    rules: [
        { test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/ ,use:'url-loader?limit=16940'
    ]
}
//其中 ？以後是 loader 的參數項，limit用來指定圖片的大小，只有小於這個值纔會被轉換成 base64 圖片

處理 JS 高級語法

假如你在項目的 JS 文件中輸入以下代碼，而後運行項目，

class Person {
    static info = 'aaa'
}
console.log(Person.info)

此時你會發現瀏覽器報錯，錯誤提示 webapack 默認打包處理不了這種高級的 JS 語法 ，那要如何解決呢？
咱們須要配置 babel 相關的 loader ，來解析並轉換這些高級的 JS 語法，具體操做以下：
1.在終端中依次運行以下命令，安裝 babel 轉換器和 babel 語法插件相應的包

npm install babel-loader @babel/core @babel/runtime -D
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

2.在根目錄建立 babel 的配置文件，命名爲 babel.config.js ，配置內容以下：

module.exports = {
    presets: [ '@babel/preset-env' ] ,
    plugin: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties' ]
}

3.打開 webpack.config.js 文件，找到 module -> rules 數組，修改 css 的 loader 規則，修改內容以下：

// exclude 爲排除項，表示 babel-loader 不須要處理 node_modules 中的 js 文件
module: {
    rules: [
        { test: /\.js$/ ,use:'babel',exclude: /node_modules/
    ]
}