傻瓜式学习webpack(三)——添加css样式

时间:2022-12-05 23:23:26

在前面两篇文章的基础上,我们还可以进行css样式的添加,很简单:

一、在webpack.config.js的loaders里面添加style-loader和css-loader,添加后的文件内容如下:

module.exports = {
//entry 入口文件 让webpack用哪个文件作为项目的入口
entry: {
index: './view/index.js',
},
//output 出口 让webpack把处理完成的文件放在哪里
output: {
path: __dirname+'/dist',
filename: '[name].js'
},
//时刻监听文件的更新
watch: true,
watchOptions: {
ignored: /node_modules/
},
//module 模块 要用什么不同的模块来处理各种类型的文件
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',//采用babel模块
exclude: /node_modules/,//忽略mode_modules的代码
query: {
presets: ['es2015','react']//解析es6和react语言
}
},{
test: /\.css?$/,
loaders: ['style-loader','css-loader'],
},
]
},
resolve: {
extensions: ['.coffee','.js']
},
};
注意,这边需要

npm install css-loader style-loader

在最新版里的loaders需要写成['style-loader','css-loader']

二、准备就绪后,在入口文件index.js的头部引入css:

require('../css/main.css');
然后直接运行,即可看到效果!