main.js
//使用 import 语法导入css样式表
import './css/index.css'
//注意:webpack默认只能打包处理js文件,无法处理其他的非js类型文件,如果要处理,需要手动安装一写合适的第三方 loader 加载器
//1.如果要打包处理css文件,需要安装cnpm i style-loader css-loader -D
//2.打开webpack.config.js这个配置文件,在里面新增一个配置节点,叫做module,它是一个对象,在这个module对象身上,有个rules属性,这个rules属性是个数组;这个数组中存放了所有对第三方文件的匹配和处理规则;
运行npm run dev 发现 src 下的 css 文件夹中的 .css .less .scss文件都无法被webpack识别打包
.css
cnpm i style-loader css-loader -D
.less
cnpm i less-loader -D
cnpm i less -D //内部依赖,不需要放入匹配规则中
.scss
cnpm i sass-loader -D
cnpm i node-sass -D //内部依赖,不需要放入匹配规则中
webpack.config.js
const path = require('path');
//这个配置文件,起始是一个JS文件,通过Node中的模块操作,向外暴露了一个配置对象
module.exports = {
entry: './src/main.js', //入口,表示要使用webpack打包哪个文件
output: {
filename: 'bundle.js', //这里是输出文件的名称
path: path.resolve(__dirname, 'dist') //指定打包好的文件输出到了那个目录中去
},
plugins:[],
module:{//这个节点,用于配置所有第三方模块加载器
rules:[//所有第三方模块的匹配规则
{ test:/\.css$/,use:['style-loader','css-loader']}, //配置处理.css文件的第三方loader规则
{ test:/\.less$/,use:['style-loader','css-loader','less-loader']}, //配置处理.css文件的第三方loader规则
{ test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}, //配置处理.css文件的第三方loader规则
]
}
};
配置成功后,运行 npm run dev,页面已经出现了样式,此时说明 样式文件打包成功了
注意:webpack4.0打包的样式文件必须存在,否则配置完成之后会报错