webpack中一些loader的配置

因为总说记不住loader的配置，方想整理处理，方便以后Ctrl+c,Ctrl+v,哈哈哈

注意：use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的；

1.使用webpack打包css文件

运行cnpm i style-loader css-loader --save-dev
修改webpack.config.js这个配置文件：

module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }//处理css文件的规则
        ]
    }

2.使用webpack打包less文件

运行cnpm i less-loader less -D
修改webpack.config.js这个配置文件：

module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
        ]
    }

3.使用webpack打包sass文件

运行cnpm i sass-loader node-sass --save-dev
在webpack.config.js中添加处理sass文件的loader模块：

module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
        ]
    }

4.使用webpack处理css中的路径

运行cnpm i url-loader file-loader --save-dev
在webpack.config.js中添加处理url路径的loader模块：

module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.(png|jpg|gif)$/, use: 'url-loader' }
        ]
    }

====================================== 未完待续 =========================================