[转] webpack 中的 loader

 

 安装 css 的 loader 

npm i style-loader css-loader -D

 然后在 webpack.config.js 中添加配置：

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

use 里的配置有顺序，执行时从后往前。

 

安装 less 的 loader

npm i less-loader less -D

 然后在 webpack.config.js 中添加配置：

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

 

安装 url 和 file 的 loader

 npm i url-loader file-loader -D

 在最后测试时，发现 webpack 5 会出问题，按 https://www.cnblogs.com/enjoyingeveryday/p/16098691.html 修改后成功显示图片：

{ test: /\.jpg|jpeg|png|gif$/,
    loader: 'url-loader',
    options:{
        limit: 10*1024,
        esModule: false
    },
    type: 'javascript/auto'    
}

 在低版本的 webpack 中，如果 js 有这样的语句，是无法打包的

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

这时候就需要使用 babel-loader

npm i babel-loader babel/core babel/plugin-proposal-class-properties -D

 没有加版本号时，提示需要登录到 github，加了版本号的命令：

npm i babel-loader@8.2.1 @babel/core@7.12.3 @babel/plugin-proposal-class-properties@7.12.1 -D

它的配置里多了一个排除项 node_modules 文件夹：

{
    test: /\.js$/,
    exclude: /node_modules/,
    use:{
        loader: 'babel-loader',
        options:{
            plugins: ['@babel/plugin-proposal-class-properties']
        }
    }
}