标签：

通过loader打包非js模块

在实际开发过程中，webpack 默认只能打包措置惩罚惩罚以.js 后缀名结尾的模块，其他非.js 后缀名结
尾的模块，webpack默认措置惩罚惩罚不，需要挪用loader加载器才可以正常打包，否则会报错!

loader加载器可以协助webpack打包措置惩罚惩罚特定的文件模块，，好比:

less-loader可以打包措置惩罚惩罚 .less相关的文件

sass-loader可以打包措置惩罚惩罚 .scss相关的文件

url-loader可以打包措置惩罚惩罚css中与url路径相关的文件

loader的挪用过程

webpack中加载器的根基使用

1.打包措置惩罚惩罚css文件
①运行npm i style-loader css-loader -D命令，安置措置惩罚惩罚css文件的loader
②在webpack.config.js的module -> rules 数组中,添加loader 法则如下:

//所有第三方文件模块的匹配法则 module: { rules: [ //正则表达式匹配后缀名中的“.”，以css结尾的文件类型 { test: /\.css$/, use:['sty1e-loader', 'css-loader'] } ] }

此中，test 暗示匹配的文件类型，use 暗示对应要挪用的loader
注意:

use数组中指定的loader 挨次是固定的

多个loader 的挪用挨次是:从后往前挪用

2.打包措置惩罚惩罚less文件
①运行 npm i less-loader less -D命令
②在 webpack.config.js的
module -> rules数组中，添加loader法则如下:

//所有第三方文件模块的匹配法则 module: { rules: [ { test:/\.1ess$/,use: ['style-loader','csS-loader',' less-loader'] } ] }

3.打包措置惩罚惩罚scss文件
①运行
npm i sass-loader node-sass -D命令
②在 webpack.config.js的module -> rules数组中，添加 loader 法则如下:

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

注意：在本机测试时，
运行 npm i sass-loader node-sass -D命令 安置堕落，
使用cnpm运行安置，安置告成
cnpm i sass-loader node-sass -D

4.配置postCSS自动添加css的兼容前缀
①运行 npm i postcss-loader autoprefixer -D命令
②在项目根目录中创建 postcss的配置文件postcss.config.js,并初始化如下配置:

const autoprefixer = require('autoprefixer') //导入自动添加前缀的插件 module.exports = { plugins: [ autoprefixer ] //挂载插件 }

③在 webpack.config.js的module -> rules 数组中，改削css 的loader法则如下:

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

webpack中的加载器