Webpack React 简单入门 三 css img

render  只能有一个组件 

 所以 嵌套的话需要用div 包裹

 

1 nstall the two loaders: npm install css-loader style-loader --save-dev.

继续配置 css

2 Webpack.config.js

3 在js 中引入即可

错误处理

webpack引入css报错cannot resolve module 'style'？

修改配置

loader: 'style-loader!css-loader'

==========图片==========

npm install file-loader --save-dev
npm install image-webpack-loader  --save-dev
npm install url-loader --save-dev

 

配置后代码

module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        }
        , {
            test: /\.css$/, // Only .css files
            loader: 'style-loader!css-loader' // Run both loaders
        },
        {
            test: /\.(png|jpg|gif|svg)$/,
            loader: 'file-loader',
            options: {
                name: '../img/[name].[ext]?[hash]'  //../img是文件存储位置，name是文件名
            }
        }
    ]

}

图片存放处

 

HTML 代码使用