webpack中处理css文件

一、引入webpack

1. 创建如下目录文件

其中index.css中可以写入自己想引入的样式。

body{
	background-color: red;
}

在index.js中导入css文件

import './index.css'

2. 打开本文件目录下的控制台，初始化项目

npm init

执行后，目录下就会生成package.json文件；修改"webpack":"webpack";注意注释要全部去掉。

3. 安装webpack需要的包

npm install --save-dev webpack-cli@3.3.12 webpack@4.44.1

4. 配置webpack

1. 新建webpack.config.js
2. 先安装 html-webpack-plugin 插件

npm install --save-dev html-webpack-plugin@4.3.0

3. 在webpack.config.js中引用插件

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
	mode:'development',
	entry:'./src/index.js',//入口文件
	output:{//输出文件
		path:path.resolve(__dirname,'dist'),//指定输出文件的存放地址
		filename:'[name].js' //指定输出文件的文件名，默认为main.js;这里的[name]主要是对照多个入口文件时使用。
	},
	plugins:[
		new HtmlWebpackPlugin({
			template:'./index.html',//指定模板
			filename:'index.html'//输出地址为入口文件输出地址
		})
	]
}

二、 需要引入合适的依赖来让引入css文件

1. 安装css-loader依赖，识别js文件中引入的css文件

npm install --save-dev css-loader@4.1.1

2. 在webpack.config.js里配置依赖

module:{//配置loader
		rules:[
			{
				test:/\.css$/,//引入css文件
				loader:'css-loader'
			}
		]
	}

3. 而这样之后，只是能识别css文件，无法识别css样式；我们需要继续引入依赖；有两种方式引入，style标签和link标签；以下分别对两种方式展开讲解

三、 将css打包到页面的style标签中

1.安装style-loader,将css打包到html的style标签中

npm install --save-dev style-loader@1.2.1

2. 注意loader配置顺序

webpack编译时，会从右到左使用loader，所以书写顺序为style-loader,css-loader,先使用css-loader识别css文件，然后，使用style-loader将css代码打包到html的style标签中。如下图所示：

3. 使用webpack编译之后结果如下；成功~

四、 将css提取出来，使用link标签引入

1. 安装mini-css-extract-plugin插件

npm install --save-dev mini-css-extract-plugin@0.9.0

2. 配置插件，指定打包后生成css文件的位置

3. 配置loader

使用css-loader识别css文件后，交给mini-css-extract-plugin插件下的loader处理，在html文件中用link标签引入css文件

完整代码如下：

4. webpack编译后的结果；成功~

批注：每次重新编译webpack时，可以先删掉dist目录，在编译，避免冲突错误。其实无论是把css打包到style标签中，还是使用link标签引入，都需要先安装css-loader识别css，然后再通过不同的loader（或插件）处理识别后的css，才可以在页面中使用css，其实需要重点是注意的是loader配置时的书写顺序。实际开发中，根据需求，灵活使用其中一种方式处理css文件就可以了。
希望对你有帮助~