微信公眾號首發(fā)墓怀！這邊文章排版可能不好汉嗽，請關(guān)注公眾號酝掩，查看歷史消息屿笼！
本教程總共7篇,每日更新一篇,請關(guān)注我們!你可以進(jìn)入歷史消息查看以往文章,也敬請期待我們的新文章!
1.React多頁面應(yīng)用1(webpack開發(fā)環(huán)境搭建,包括Babel等舔、熱更新等) ----2017.12.28
2.React多頁面應(yīng)用2(處理CSS及圖片,引入postCSS及圖片處理等)----2017.12.29
3.React多頁面應(yīng)用3(webpack性能提升,包括打包性能骚灸、提取公共包等)----2017.12.30
4.React多頁面應(yīng)用4(webpack自動化生成多入口頁面)----2017.12.31
5.React多頁面應(yīng)用5(webpack生產(chǎn)環(huán)境配置,包括壓縮js代碼,圖片轉(zhuǎn)碼等)----2018.01.01
6.React多頁面應(yīng)用6(gulp自動化發(fā)布到多個環(huán)境,生成版本號,打包成zip等)----2018.01.02
7.React多頁面應(yīng)用7(引入eslint代碼檢查)----2018.01.03
開發(fā)環(huán)境: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 開發(fā)配置
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");//基礎(chǔ)配置
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: [
/*設(shè)置開發(fā)環(huán)境*/
? ? ? ?new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
? ? ? ? ? ?}
}),
? ? ? ?/*設(shè)置熱更新*/
? ? ? ?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/
? ? ? ? ? ?}
]
},
? ?/*設(shè)置api轉(zhuǎn)發(fā)*/
? ?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
? ? ? ? ? ?}
],
? ? ? ?/*打開瀏覽器 并打開本項目網(wǎng)址*/
? ? ? ?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 Reactfrom 'react';
import '../../public/css/index.pcss'
class Indexextends 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 (
? ? ? ? ? ? ? ? ? ?這是首頁222222
? ? ? ? ? ? ? ? ? ?Seconds: {this.state.seconds}
? ? ? ?);
? ?}
}
export default Index;
現(xiàn)在你的工程就支持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");//基礎(chǔ)配置
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: [
/*設(shè)置開發(fā)環(huán)境*/
? ? ? ?new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development'),
? ? ? ? ? ?}
}),
? ? ? ?/*設(shè)置熱更新*/
? ? ? ?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 +'/'
? ? ? ? ? ?}
]
},
? ?/*設(shè)置api轉(zhuǎn)發(fā)*/
? ?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
? ? ? ? ? ?}
],
? ? ? ?/*打開瀏覽器 并打開本項目網(wǎng)址*/
? ? ? ?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
本文完
禁止擅自轉(zhuǎn)載,如需轉(zhuǎn)載請在公眾號中留言聯(lián)系我們!
感謝童鞋們支持!
歡迎童鞋們留言!
