使用style-loader,css-loader总结

使用style-loader,css-loader总结

安装style-loader,css-loader

cnpm install style-loader css-loader -D

主要代码，在module的rule中添加

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

全部代码

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

module.exports = {
	mode: "development", //打包模式 development开发模式
	entry: "./src/index.js", //入口文件指定
	output: {
		//加入前缀
		/* 	publicPath:'http://baidu.com', */
		filename: "main.js", //打包后的文件名称
		path: path.resolve(__dirname, "dist") //resolve绝对路径引入
	},
	module: {
		rules: [{
				test: /.(jpg|png)$/,
				use: {
					loader: 'file-loader',
					options: {
						name: '[name]_[hash].[ext]',
						outputPath: 'images/',
					}
				}
			},
			{
				test:/.css$/,
				use:[
					'style-loader',
					'css-loader'
				]
			}
		]
	},
	plugins: [
		new Htmlwebpackplugin({
			template: './src/index.html'
		})
	]
}

注意事项，use后面跟的是数组了，跟使用file-loader/url-loader不一样，file-loader/url-loader的use后面是对象