本教程总共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 Reactfrom 'react';
import '../../public/css/index.pcss';
class Indexextends React.Component {
render() {
return (
这是头部
这是底部
);
}
}
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
这是头部11、查看浏览器
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!
网友评论