react+webpack4构建项目（2webpack4 处理CSS及图片,引入postCSS,及图片处理等）

1、添加postcss支持，npm i -D postcss-loader precss post-cssnext style-loader css-loader
2、配置postcss, 根目录下创建 postcss.config.js 文件，如下
module.exports = {
plugins: [
require('precss'),
require('postcss-cssnext')
]
}
3.配置webpack开发配置， 在webpack.dev.conf.js中 module 的rules中添加
{
test: /.(css|pcss)$/,
loader: 'style-loader?sourceMap!css-loader?sourceMap!postcss-loader?sourceMap',
exclude: /node_modules/
}
4.app/public/css下创建 index.pcss文件，写css代码
5.在app/component/index/index.jsx中引入 index.pcss文件
import '../../public/css/index.pcss'
6.图片文件的处理，原则上本地图片建议都放在背景里 ，添加依赖
npm i -D file-loader url-loader
8.修改webpack配置文件
config -> webpack -> webpack.dev.conf.js
新增代码
{
test: /.(png|jpg|gif|ttf|eot|woff|woff2|svg|swf)$/,
loader: 'file-loader?name=[name].[ext]&outputPath=' + webpackFile.resource + '/'
}
9.插入图片
修改 index.pcss
app -> public -> css -> index.pcss 目录下
.logo {
display: inline-block;
width: 200px;
height: 200px;
background-image: url("../img/ico-header-logo.png"); //添加的图片
background-size: contain;
}