Webpack基础配置(三)

前言

• 问：为什么使用loader？

  • webpack自身只能理解js类型的文件，loader可以将所有类型的文件转换为webpack可以处理的有效模块。

• 问：本节有哪些loader？

  • style-loader、css-loader、less-loader、sass-loader、postcss-loader

.css 文件

css-loader

1. 下载相关loader
   yarn add style-loader css-loader --dev
   
   

2. webpack.config.js文件中添加规则

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

   loader的加载顺序为从右至左
   css-loader：将.css文件的内容转化为js字符串
   style-loader：动态创建<style>标签，将转化的字符放入\<style>标签中
   
   

3. 创建src/css/base.css文件
   
   base.css文件内容
   
   index.html中添加
   
4. 在入口文件中，引入.css文件
   
5. 执行命令
   yarn build
   
   
6. 页面效果
   

处理.less文件

less-loader

1. 下载相关loader
   yarn add style-loader css-loader --dev
yarn add less-loader less --dev

   注：less为转换.less文件命令

2. webpack.config.js文件中添加规则

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

   loader的加载顺序为从右至左
   less-loader：将.less文件转换为.css文件
   css-loader：将.css文件的内容转化为js字符串
   style-loader：动态创建<style>标签，将转化的字符放入\<style>标签中
   
   

3. 创建src/less/base.less文件
   
4. 在入口文件中，引入.less文件
   
   less文件内容
   
   index.html中添加
   
5. 执行命令
   yarn build
   
   
6. 页面效果
   

处理.scss/.sass文件

sass-loader

1. 下载相关loader
   yarn add style-loader css-loader --dev
yarn add sass-loader node-sass --dev

   注：node-sass为转换.scss/.sass文件命令
注：如果node-sass安装失败，则执行 yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g

2. webpack.config.js文件中添加规则

   {
     test: /\.s(a|c)ss$/,
     use: ['style-loader', 'css-loader', 'sass-loader']
   }

   loader的加载顺序为从右至左
   sass-loader：将.scss/.sass文件转换为.css文件
   css-loader：将.css文件的内容转化为js字符串
   style-loader：动态创建<style>标签，将转化的字符放入\<style>标签中
   
   

3. 创建src/scss/base.scss文件
   
   .scss文件内容
   
   index.html中添加
   
4. 在入口文件中，引入.scss文件
   
   .scss文件内容
   
   index.html中添加
   
5. 执行命令
   yarn build
   
   
6. 页面效果
   

样式适配浏览器，自动添加前缀，增强项目兼容性

postcss-loader

1. 下载loader及相关
   yarn add postcss-loader autoprefixer --dev

   注：autoprefixer是PostCSS插件，可以自动添加所需的带前缀的属性声明。
注：postcss也需要配置browserslist

2. postcss.config.js(postcss配置文件)

      module.exports = {
     plugins: [
         // 引入插件 
         require('autoprefixer')
     ]
     };

3. webpack.config.js文件中修改规则
   

   注：postcss-loader将(.less或.scss)转换后的.css文件添加前缀

4. 修改base.css、base.less、base.scss文件(添加带前缀的属性)
   
5. 执行命令
   yarn build
   
   
6. 生成代码效果
   css：
   

   less：
   

   scss：
   

链接

上一篇 Webpack基础配置(二)
下一篇 Webpack基础配置(四)