关于前端: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 根底配置(四)