本教程总共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
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
欢迎童鞋们留言!