标签：rules module loader webpack js css 加载

通过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'] }
  ]
}

标签：rules,module,loader,webpack,js,css,加载
来源： https://www.cnblogs.com/songsongblue/p/12088650.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。