Webpack打包样式资源

lyz自学笔记

---

前言

webpack如果要编译css、less等样式文件，需要使用loader帮忙翻译

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、如何打包样式文件

1、在src下分别创建index.css和index.less文件，并且在里面写一些样式

	//index.css文件
	html, body{
	  margin: 0;
	  padding: 0;
	  height: 100%;
	  background-color: pink;
	}

	//index.less文件
	#title{
	  color: red;
	}

2、在src下创建一个index.js文件，将index.less和index.css文件导入进来

	//引入样式资源
	import './index.css'
	import './index.less'

3、webpack配置文件

• 因为webpack不能直接编译css、less文件，所以就需要Loader帮忙将css、less文件翻译成webpack可以认识的模块，所以必须创建webpack配置文件
• webpack配置文件：
  ①、作用：指示webpack去做什么！（当你运行webpack指令时，会加载里面的配置）
  ②、所有构建工具都是基于nodejs平台运行的，模块化默认采用CommonJs
  ③。具体配置

	//resolve用来拼接绝对路径的方法
	const {resolve} = require('path')
	//webpack配置，使用CommonJs暴露出去
	module.exports = {
	  //入口起点：./src/index.js
	  entry:'./src/index.js',
	  //输出路径，output是一个对象，打包后输出到当前文件下
	  output:{
	    filename:'built.js',
	    path:resolve(__dirname,'build')
	  },
	  //loader的配置
	  module:{
	  	//编译的规则
	    rules:[
	      //详细的loader配置
	      {
	      	//匹配哪些文件：匹配css文件，其他文件运行到这里跳过
	        test:/\.css$/,
	        //使用哪些loader进行处理
	        use:[
	        	//use数组中loader执行顺序：从右到左，从下到上，依次执行
	        	//'style-loader'：创建style标签，将js中的样式资源插入，添加到head中生效
	            'style-loader',
	            //‘css-loader’：将css文件变成CommonJs模块加载js中，里面内容样式字符串
	            'css-loader'
	        ]
	      },
	      {
	        test:/\.less$/,
	        use:[
	          'style-loader',
	          'css-loader',
	          //将less文件编译成css文件
	          'less-loader'
	        ]
	      }
	    ]
	  },
	  //plugins的配置
	  plugins:[
	
	  ],
	  //模式
	  mode:'development'	//开发模式
	  // mode:'production'
	}

4、webpack配置文件写完后，需要将当前包变成一个包，然后下载webpack和webpack-cli
5、因为我们在配置文件使用了‘‘’style-loader’、'css-loader’和’less-loader’，所以需要下载这三个loader

	npm i css-loader style-loader -D
	npm i less-loader -D

6、下载完成后使用webpack命令就可以编译了，它会自动根据配置文件中的配置编译。
7、创建一个index.html文件，将打包后的built.js文件引入，就可以了

二、总结

1、loader的配置写到module里的rules中，一个对象处理一种资源