本教程总共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升级了到webpack4,好多童鞋按照第一篇教程做,会出问题,主要是我当时没有考虑按版本号安装导致的,今天我们用webpack4配置个工程!这次我们安装依赖的时候,带上版本号,以后大家不管什么时候,看到这篇教程,照着做,应该不会出大问题,如有问题在下面留言,或者公众号内联系我们!




好了,废话不多说,我们开始撸码!




1、新建工程 react2









2、初始化工程

npm init -y









3、建立工程目录

--app    主目录

          --component    react组件目录

                  --index    首页目录

          --public    公共目录 主要放 js css img

                 --js    公共js文件

                 --css  css目录

                --img   图片目录


--devBuild    webpack 开发环境下 打包输出目录

--config    打包配置目录

       --webpack    webpack配置目录

--entryBuild    webpack 打包入口文件目录




目录没有展开状态



目录展开状态









4、安装react

npm i -S react@16.3.0 react-dom@16.3.0

-S 意思是保存 到 package.json dependencies 字段












5、安装 webpack babel 相关依赖

npm i -D webpack@4.4.1 webpack-cli@2.0.13 webpack-dev-server@3.1.1
webpack-merge@4.1.2 babel-cli@6.26.0 babel-preset-env@1.6.1
babel-preset-react@6.24.1 babel-preset-react-hmre@1.1.1 babel-loader@7.1.4

-D 意思是保存 到 package.json devDependencies字段

注意复制的时候要是一行的,不能换行!









6、新建Index.jsx文件




    首页: Index.jsx

    存放在 app->component->index 目录下




完整代码



import React from 'react';

class Index extends React.Component {
render() {
return (
<div>
               这是首页
</div>
       );
   }
}

export default Index;











7、建立 index.html

存放再 根目录下-> devBuild 下




完整代码


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta content="telephone=no" name="format-detection">
   <title>react1</title>
</head>
<body>
<div id="app"></div>
<script type=text/javascript src=js/index.js></script>
</body>
</html>











8、建立webpack 入口文件 

    entryBuild -> index.js




完整代码
import React from 'react';
import ReactDOM from 'react-dom';
import Index from '../app/component/index/Index.jsx';
ReactDOM.render(<Index/>,document.getElementById('app'));













9、配置webpack

基础配置:

config -> webpack -> webpack.base.conf.js




完整代码


let config = {
entry: {
'index':'./entryBuild/index.js'
   },
   resolve: {
extensions: [".js", ".json", ".jsx", ".css",".pcss"],
   }
};
module.exports = config;








文件路径配置

config -> webpack -> webpack.file.conf.js




完整代码


module.exports = {
devDirectory:'devBuild',/*开发目录*/
   proDirectory:'dist',/*发布目录*/
   resource:'resource',/*静态资源*/
};








开发环境配置:

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, {
/*设置开发环境*/
   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")
],
           }
           
]
},
   /*设置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;



红框部分就是webpack4 与webpack3 变化支出








以下是webpack3截图,打红叉的是webpack4 变化的部分,我们会在下面教程讲解如何提取公共包!











10、配置babel

根目录下 .babelrc




完整代码
{
"presets":["react","env"],
 "env":{
"development": {
"presets":["react-hmre"]
}
}
}



注:react-hmre  是  babel-preset-react-hmre   用于开启 热替换






11、配置npm执行命令

在跟目录下 package.json 里配置  scripts 字段

"dev": "webpack-dev-server --devtool eval --progress --colors --profile
--config config/webpack/webpack.dev.conf.js",














12、执行 npm run dev






执行完截图






浏览器截图






我们来修改一下看看能不能 热替换









本文完 



禁止擅自转载,如需转载请在公众号中留言联系我们!

感谢童鞋们支持!

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