webpack4系列笔记之（3）loader 打包静态资源--样式篇

一、webpack如何打包样式资源？

上篇介绍到什么是loader，这篇我们使用 ‘style-loader’，‘css-loader’,‘scss-loader’，这些loader来处理样式文件

备注：本文node版本10.13.0 ，webpack版本4.26.0 webpack-cli版本3.1.2

二、打包css，scss文件详细配置

1、安装 style-loader, css-loader, sass-loader

npm i style-loader css-loader sass-loader node-sass -D

2、配置webpack.config.js

const path = require('path');
	module.exports = {
		//  入口文件
		entry: './src/index.js',
		output: {
			// 输出文件名
			filename: 'built.js',
			// 输出文件路径
			path: path.resolve(__dirname,'dist')
		},
		// 配置loader模块
		module: {
			rules: [
				{
					// 找到项目中的css资源
					test: /\.css$/,
					use: [
						//  将生成的css文件添加到html 的head头里
						'style-loader',
						// 判断多个css文件之间关系，生成一个css文件
						'css-loader'	
					]
				},
				{
					// 找到项目中的scss资源
					test: /\.scss$/,
					use: [
						//  将生成的css文件添加到html 的head头里
						'style-loader',
						// 判断多个css文件之间关系，生成一个css文件
						'css-loader',
						// 将scss文件编译成css文件
						// 安装sass-loader 时需要同时安装 node-sass
						'sass-loader'
					]
				}		
			]	
		},
		// 打包模式有两种：development和production；默认是production模式，会自定压缩代码
		mode: 'development'
	}

3、自动添加css3浏览器兼容前缀

1. 下载postcss-loader

    npm i postcss-loader -D
   

2. 配置webpack.config.js文件

    {
    	// 找到项目中的scss资源
    	test: /\.scss$/,
    	use: [
    		//  将生成的css文件添加到html 的head头里
    		'style-loader',
    		// 判断多个css文件之间关系，生成一个css文件
    		'css-loader',
    		// 将scss文件编译成css文件
    		// 安装sass-loader 时需要同时安装 node-sass
    		'sass-loader',
    		'postcss-loader'
    	]
    }	
   

3. 下载自动加前缀插件

    npm i autoprefixer -D
   

4. 在项目根目录下新建postcss.config.js文件，配置postcss，引入 autoprefixer

    module.exports = {
    	plugins: [
    		require('autoprefixer')	
    	]	
    }
   

4、详细配置css-loader
业务场景：当index.js文件中引入a.scss文件，a.scss文件有使用@import ‘./b.scss’,需要增加配置css-loader

{
	// 找到项目中的scss资源
	test: /\.scss$/,
	use: [
		//  将生成的css文件添加到html 的head头里
		'style-loader',
		// 判断多个css文件之间关系，生成一个css文件
		{
			loader:'css-loader',
			options: {
				// 确保a.scss文件中引入的其他scss文件都会从下到上依次执行 ‘postcss-loader’, 'sass-loader'
				importLoaders: 2,
				//  开启css的模块化打包
				modules: true
			}
		}
		// 将scss文件编译成css文件
		// 安装sass-loader 时需要同时安装 node-sass
		'sass-loader',
		'postcss-loader'
	]
}	

webpack系列笔记会持续更新，敬请关注