webpack中加载器的基本使用

webpack中加载器的基本使用

处理以下基本常见的类型.

1.打包处理CSS类型

1.1 运行 npm i style-loader css-loader -D 安装文件的loader.

1.2 在webpack.config.js的module中添加如下规则.

1.3 引入相应的CSS文件

module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
    }
// 打包过程中加载器都是从后往前执行的.

1.4 重新打包

---

2.打包处理less类型

2.1 运行npm i less-loader less -D

2.2 在webpack.config.js的module中添加如下规则.

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

3.打包出scss类型

4.处理CSS兼容性问题

::placeholder{:':
}
// 这个伪类选择器具有兼容性问题

5.打包图片和字体资源

6.打包处理js文件中高级得语法

项目地址:https://github.com/bigcuger/webpack_loader.git