css-loader模块化

最新推荐文章于 2023-10-19 10:24:13 发布

小蔡来了

最新推荐文章于 2023-10-19 10:24:13 发布

阅读量383

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/weixin_48462578/article/details/115187576

版权

webpack 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何在Webpack配置文件webpack.config.js中设置css-loader，以实现CSS模块化的加载和使用。通过示例展示了在JavaScript中引用CSS的特殊写法。

摘要由CSDN通过智能技术生成

webpack.config.js主要配置

{
	test:/.css$/,
	use:[
		'style-loader',
		{
			loader:'css-loader',
			options:{
				modules:true
			}
		},
		'sass-loader'
	]
}

全部代码

const path = require("path"); //webpack内部方法path组件
const Htmlwebpackplugin = require("html-webpack-plugin");

module.exports = {
	mode: "development", 
	entry: "./src/index.js", 
	output: {
		/* 	publicPath:'http://baidu.com', */
		filename: "main.js",
		path: path.resolve(__dirname, "dist") 
	},
	module: {
		rules: [{
				test: /.(jpg|png)$/,
				use: {
					loader: 'file-loader',
					options: {
						name: '[name]_[hash].[ext]',
						outputPath: 'images/',
					}
				}
			},
			{
				test:/.css$/,
				use:[
					'style-loader',
					{
						loader:'css-loader',
						options:{
							modules:true
						}
					},
					'sass-loader'
				]
			}
		]
	},
	plugins: [
		new Htmlwebpackplugin({
			template: './src/index.html'
		})
	]
}