React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)

本教程总共9篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!

1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.04

2、React多页面应用2(webpack4 处理CSS及图片,引入postCSS,及图片处理等)---2018.04.08

3、React多页面应用3(webpack4 多页面实现)---2018.04.09

4、React多页面应用4(webpack4 提取第三方包及公共组件)---2018.04.10

5、React多页面应用5(webpack4 多页面自动化生成多入口文件)---2018.04.11

6、React多页面应用6(webpack4 开发环境打包性能小提升)---2018.04.12

7、React多页面应用7(webpack4 生产环境配置)---2018.04.13

8、React多页面应用8(webpack4 gulp自动化发布到多个环境,生成版本号,打包成zip等)---2018.04.16

9、React多页面应用9(webpack4 引入eslint代码检查)---2018.04.17

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

这块和webpack3没有多大区别，不过也再写下！

1.添加postCSS 支持

npm i -D [email protected] [email protected] [email protected] [email protected] [email protected]

注意复制的时候要在一行，不能分行

2.配置postcss

根目录下 postcss.config.js

module.exports = {
plugins: [
require('precss'),
      require('postcss-cssnext')
    ]
}

3.配置 webpack 开发配置

完整代码

const webpack = require('webpack');//引入webpack
const opn = require('opn');//打开浏览器
const merge = require('webpack-merge');//webpack配置文件合并
const path = require("path");
const baseWebpackConfig = require("./webpack.base.conf");//基础配置
const webpackFile = require("./webpack.file.conf");//一些路径配置

let config = merge(baseWebpackConfig, {
/*设置开发环境*/
    mode: 'development',
    output: {
path: path.resolve(webpackFile.devDirectory),
        filename: 'js/[name].js',
        chunkFilename: "js/[name].js",
        publicPath: ''
    },
    plugins: [
/*设置热更新*/
        new webpack.HotModuleReplacementPlugin(),
    ],
    module: {
rules: [
            {
test: /\.(js|jsx)$/,
                use: [
'babel-loader',
                ],
                include: [
                    path.resolve(__dirname, "../../app"),
                    path.resolve(__dirname, "../../entryBuild")
                ],
                exclude: [
                    path.resolve(__dirname, "../../node_modules")
                ],
            },
            {
test: /\.(css|pcss)$/,
                loader: 'style-loader?sourceMap!css-loader?sourceMap!postcss-loader?sourceMap',
                exclude: /node_modules/
            }
        ]
    },
    /*设置api转发*/
    devServer: {
host: '0.0.0.0',
        port: 8080,
        hot: true,
        inline: true,
        contentBase: path.resolve(webpackFile.devDirectory),
        historyApiFallback: true,
        disableHostCheck: true,
        proxy: [
            {
context: ['/api/**', '/u/**'],
                target: 'http://192.168.12.100:8080/',
                secure: false
            }
        ],
        /*打开浏览器 并打开本项目网址*/
        after() {
            opn('http://localhost:' + this.port);
        }
    }
});
module.exports = config;

新增了如下代码

{
test: /\.(css|pcss)$/,
    loader: 'style-loader?sourceMap!css-loader?sourceMap!postcss-loader?sourceMap',
    exclude: /node_modules/
}

4.新建index.pcss 文件

app -> public -> css 目录下

.cont {
  .top {
color: #FF9302;
  }
  .bottom {
color: #F00000;
  }
}

如果编译器 报错: 请安装postCSS插件

5.react组件 引入index.pcss 文件

修改 app->component->index->Index.jsx

import React from 'react';
import '../../public/css/index.pcss';

class Index extends React.Component {
render() {
return (
<div className="cont">
                <div className="top">
                    这是头部
</div>
                <div className="bottom">
                    这是底部
</div>
            </div>
        );
    }
}

export default Index;

6、我们查看下浏览器

引用成功

7、图片文件的处理

原则上本地图片建议都放在背景里

添加依赖

npm i -D [email protected] [email protected]

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 + '/'
}

完整代码

const webpack = require('webpack');//引入webpack
const opn = require('opn');//打开浏览器
const merge = require('webpack-merge');//webpack配置文件合并
const path = require("path");
const baseWebpackConfig = require("./webpack.base.conf");//基础配置
const webpackFile = require("./webpack.file.conf");//一些路径配置

let config = merge(baseWebpackConfig, {
/*设置开发环境*/
    mode: 'development',
    output: {
path: path.resolve(webpackFile.devDirectory),
        filename: 'js/[name].js',
        chunkFilename: "js/[name].js",
        publicPath: ''
    },
    plugins: [
/*设置热更新*/
        new webpack.HotModuleReplacementPlugin(),
    ],
    module: {
rules: [
            {
test: /\.(js|jsx)$/,
                use: [
'babel-loader',
                ],
                include: [
                    path.resolve(__dirname, "../../app"),
                    path.resolve(__dirname, "../../entryBuild")
                ],
                exclude: [
                    path.resolve(__dirname, "../../node_modules")
                ],
            },
            {
test: /\.(css|pcss)$/,
                loader: 'style-loader?sourceMap!css-loader?sourceMap!postcss-loader?sourceMap',
                exclude: /node_modules/
            },
            {
test: /\.(png|jpg|gif|ttf|eot|woff|woff2|svg|swf)$/,
                loader: 'file-loader?name=[name].[ext]&outputPath=' + webpackFile.resource + '/'
            }
        ]
    },
    /*设置api转发*/
    devServer: {
host: '0.0.0.0',
        port: 8080,
        hot: true,
        inline: true,
        contentBase: path.resolve(webpackFile.devDirectory),
        historyApiFallback: true,
        disableHostCheck: true,
        proxy: [
            {
context: ['/api/**', '/u/**'],
                target: 'http://192.168.12.100:8080/',
                secure: false
            }
        ],
        /*打开浏览器 并打开本项目网址*/
        after() {
            opn('http://localhost:' + this.port);
        }
    }
});
module.exports = config;

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;
}

10、修改 Index.jsx

app->component->index->Index.jsx

<div>这是头部</div>
<i className="logo"/>

11、查看浏览器

本文完 

禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

如果你有什么问题,可以在下方留言给我们!