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 precss@3.1.2 postcss-loader@2.1.3 postcss-cssnext@3.1.0 style-loader@0.20.3 css-loader@0.28.11

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

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 file-loader@1.1.11 url-loader@1.0.1

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、查看浏览器

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

原文发布于微信公众号 - 前端人人(frontend_everyone)

原文发表时间:2018-04-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏跟着阿笨一起玩NET

Dev XtraTreeList 学习

本文转载:http://www.cnblogs.com/VincentLuo/archive/2012/01/06/2313983.html

34510
来自专栏Spring相关

Vue中使用children实现路由的嵌套

14330
来自专栏九彩拼盘的叨叨叨

将 ES6 代码转换成 ES5

本文介绍用 Gulp 和 Babel 6 来将 ES6 代码转换成 ES5 代码。

8220
来自专栏谈补锅

Phonegap之ios对iPhone6和Plus的闪屏适配 -- xmTan

  故事的发生起于,由于老板强烈要求app在iPhone6和5有一样的工具栏,然后前端妹子用@media为iPhone6和Plus做了样式适配。然后问题来了,竟...

25940
来自专栏Micro_awake web

Vue学习2:模板语法

参考:https://cn.vuejs.org/v2/guide/syntax.html,http://www.runoob.com/vue2/vue-temp...

9300
来自专栏前端人人

React第三方组件2(状态管理之Refast的使用③扩展ctx)

本教程总共5篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件2(状态管理之Refast的使用①...

30840
来自专栏Micro_awake web

Vue学习2:模板语法

11040
来自专栏Java成神之路

GEF入门实例_总结_04_Eclipse插件启动流程分析

这6个文件对RCP应用程序而言非常重要,可能我们现在对这几个文件的理解还是云里雾里,这一节我们将通过这几个文件来了解Eclipse插件的启动过程。

13240
来自专栏kwcode

MVC分部视图@Html.Partial

  加载分布视图的方式: //1、以视图名使用当前文件夹下的视图(如果没有找到,则搜索 Shared 文件夹) @Html.Partial("_...

30870
来自专栏张善友的专栏

GridView控件使用经验

   GridView控件是Asp.net 1.1版本流行控件DataGrid的继承者,功能比DataGrid增强不少,但是也有很大的不同啊。将最近使用这个控件...

23990

扫码关注云+社区

领取腾讯云代金券