React多页面应用2(处理CSS及图片,引入postCSS,及图片处理等)
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!
1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28
2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29
3.React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)----2017.12.30
4.React多页面应用4(webpack自动化生成多入口页面)----2017.12.31
5.React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)----2018.01.01
6.React多页面应用6(gulp自动化发布到多个环境,生成版本号,打包成zip等)----2018.01.02
7.React多页面应用7(引入eslint代码检查)----2018.01.03
开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2
1.添加postCSS 支持
npm i -D precss postcss-loader postcss-cssnext style-loader css-loader
2.配置postcss
根目录下 postcss.config.js
module.exports = {
plugins: [
require('precss'),
require('postcss-cssnext')
]
}
3.配置 webpack 开发配置
config -> webpack -> webpack.dev.conf.js
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, {
output: {
path: path.resolve(webpackFile.devDirectory),
filename: 'js/[name].js',
chunkFilename: "js/[name]-[id].js",
publicPath: ''
},
plugins: [
/*设置开发环境*/
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
}
}),
/*设置热更新*/
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 文件
import React from 'react';
import '../../public/css/index.pcss'
class Index extends React.Component {
constructor(props) {
super(props);
this.state = { seconds: 0 };
}
tick() {
this.setState(prevState => ({
seconds: prevState.seconds + 1
}));
}
componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div className="cont">
<div className="top">
这是首页222222
</div>
<div className="bottom">
Seconds: {this.state.seconds}
</div>
</div>
);
}
}
export default Index;
现在你的工程就支持postCSS了.
6.图片的处理
原则上本地图片建议都放在背景里
添加依赖
npm i -D file-loader
7.修改webpack配置文件
config -> webpack -> webpack.dev.conf.js
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, {
output: {
path: path.resolve(webpackFile.devDirectory),
filename: 'js/[name].js',
chunkFilename: "js/[name]-[id].js",
publicPath: ''
},
plugins: [
/*设置开发环境*/
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
}
}),
/*设置热更新*/
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;
新添加了 如下配置代码
{
test: /.(png|jpg|gif|ttf|eot|woff|woff2|svg|swf)$/,
loader: 'file-loader?name=[name].[ext]&outputPath=' + webpackFile.resource + '/'
}
8.插入图片
修改 index.pcss
app -> public -> css 目录下
.cont {
.top {
color: #FF9302;
.bd_logo1 {
display: inline-block;
width: 540px;
height: 258px;
background-image: url("../img/bd_logo1.png");
background-size: contain;
}
}
.bottom {
color: #F00000;
}
}
9.再次运行
npm run dev
- Android面试系列之应用内多语言切换
- Android面试系列之AsyncTask
- Kali-Linux扩充弹药:Kali Linux metapackages
- 使用HackRF解调TDD-LTE信号
- 一个优秀的Android应用从建项目开始
- Ruby OpenSSL 私钥伪造脚本
- 基于 k8s 的 Jenkins 构建集群实践
- Visual C#.Net网络程序开发-Tcp篇(1) 祥细内容:
- 无服务器化的微服务持续交付
- Visual C#.Net网络程序开发-Tcp篇(2) 祥细内容:
- 看你是否够老 – ipman的vxd程序介绍的翻译
- Visual C#.Net网络程序开发-Tcp篇(3) 祥细内容:
- 安全科普:流量劫持能有多大危害?
- OpenSSL心脏出血漏洞全回顾
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Nginx + Spring Boot 实现负载均衡
- 小书MybatisPlus第2篇-条件构造器的应用及总结
- 一个案例演示 Spring Security 中粒度超细的权限控制!
- 信息收集之主机发现:nmap
- 文本文件逐行处理–用java8 Stream流的方式
- 使用java8API遍历过滤文件目录及子目录及隐藏文件
- 使用位运算、值交换等方式反转java字符串-共四种方法
- 精讲RestTemplate第2篇-多种底层HTTP客户端类库的切换
- 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用
- 在图中添加多边形
- 设置坐标轴刻度的位置和样式
- OkHttp透明压缩,收获性能10倍,外加故障一枚
- 体验spring-boot-devtools热部署,流畅且不失强大
- 【每周一库】 simsearch - a simple and lightweight fuzzy search engine
- 手把手教你实现xxl-job分布式任务调度平台搭建