博客

接着上次Vue项目js文件后的css文件配置说明

一.首先说个题外话：

可以用

cnpm i html-webpack-pluagin -D

命令，在内存中根据index.html模板页面生成HTML插件(此命令会将html文件托管到内存中)

同样也需要配置webpack.config.js文件

const htmlWebpackPlugin = require('html-webpack-plugin')
modele.exports={
plugins:[
		new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件
			template:path.join(__dirname,'./src/index.html'),//指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
			filename:'index.html'//指定生成页面的名称
		})
	    ]
}

2.需要注意：引用css文件不是在html文件头部引用了，而是在js文件中引用

注意

：

1.webpack默认只能打包处理js类型文件，无法处理其他类型文件。处理非js文件，需手动安装第三方加载器

3.css文件：安装

cnpm i style-loader css-loader -D


4.打开webpack.config.js文件进行相关配置。

module.exports = {
	//作用：用于配置所有第三方模块加载器
	module:{
		rules:[//第三方匹配规则
			{test:/\.css$/,use:['style-loader','css-loader']},
		]
	}
}

5.其他sass，less文件引用配置方法和css文件相同

若报警告：


WARN：REQUIRES A PEER OF LESS@xxx(版本号) but none was installed


安装下缺少的这个包就可以了。