03-webpack5-使用loader编译css

项目结构

webpackCssLoader
│  package-lock.json
│  package.json
│  webpack.config.js
└─src
		index.css
        index.js

安装依赖

在webpackCssLoader目录下运行

npm i webpack webpack-cli html-webpack-plugin css-loader style-loader --save-dev

webpack配置文件

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exprots = {
	mode:'development',
	entry:'./src/index.js',
	output:{
		path:resolve(__dirname,'dist'),
		filename:'index.js'
	},
	module:{
		rules:[
			{
				// 匹配文件规则
				test:/\.css$/i,
				// 使用的loader
				use:['style-loader','css-loader']
			}
		]
	},
	plugins:[new HtmlWebpackPlugin()]
}

webpack关键配置

module：接受一个对象，里面的配置决定了如何处理不同的模块
rules：接受一个数组对象，每一项为处理某种模块的配置

loader

用于处理不同的文件

• css-loader：处理引入的css文件
• style-loader：将处理好的css内容，通过js将style标签写到对应的HTML文件中

index.js文件

import "./index.css";
/**
	其他逻辑代码
*/

打包命令

• 方式一：在webpackCssLoader目录下运行

webpack --config ./webapck.config.js

• 方式二：在package.json文件的scripts属性新增如下命令

{
	...
	"scripts":{
		"build":"webpack --config ./webpack.config.js"
	}
	...
}

修改保存后，在webpackCssLoader目录下运行如下命令：

npm run build

打包后的目录

webpackCssLoader
│  package-lock.json
│  package.json
│  webpack.config.js
├─dist
│      index.build.js
│      index.html
└─src
		index.css
        index.js