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基础配置(四)