傻瓜式学习webpack（三）——添加css样式

在前面两篇文章的基础上，我们还可以进行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');

然后直接运行，即可看到效果！