webpack4.X react-router
環境准備工作：windows7、webStorm 2017.1.4、Nodejs 8.7.0、npm 5.4.2
PS:安裝的時我們都帶上版本，這樣即便webpack版本發生變化，也不會出現版本問題。
初始化package.json文件
npm init
npm安裝react、react-dom包
npm install react@16.3.0 react-dom@16.3.0 --save
或者
npm i -S react@16.3.0 react-dom@16.3.0
npm安裝webpack、webpack-cli等包
npm install 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 --save-dev
或者
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
安裝 react-router-dom
npm install react-router-dom --save-dev
或者
npm i -S react-router-dom
文件夾結構
各個文件的內容
src => views => home => Index.jsx
import React from 'react'; class Index extends React.Component { render() { return ( <div> 首頁 </div> ); } } export default Index;
src => views => me => Index.jsx
import React from 'react'; class Index extends React.Component { render() { return ( <div> 個人中心 </div> ); } } export default Index;
src => views => shop => Index.jsx
import React from 'react'; class Index extends React.Component { render() { return ( <div> 商城 </div> ); } } export default Index;
src => views => Index.jsx
import React from 'react'; import {HashRouter, Route, NavLink} from 'react-router-dom' import Me from './me/Index' import Shop from './shop/Index' import Home from './home/Index'; const Index = () => <HashRouter> <div> <div className="nav"> <NavLink to="/Home" activeClassName="selected" exact>首頁</NavLink> <NavLink to="/Shop" activeClassName="selected" exact>商城</NavLink> <NavLink to="/Me" activeClassName="selected" exact>個人中心</NavLink> </div> <Route path="/Shop" component={Shop}/> <Route path="/Me" component={Me}/> <Route path="/Home" component={Home}/> </div> </HashRouter> export default Index;
src => index.js
import React from 'react'; import ReactDOM from 'react-dom'; import Index from './views/Index'; ReactDOM.render(<Index/>, document.getElementById('app'));
static => index.html
<!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>react-router</title> </head> <body> <div id="app"></div> <script type=text/javascript src=js/index.js></script> </body> </html>
webpack => base.config.js
let config = { entry: { 'index':'./src/index.js' }, resolve: { extensions: [".js", ".json", ".jsx", ".css"], } }; module.exports = config;
webpack => dev.config.js
const webpack = require('webpack');//引入webpack
const opn = require('opn');//打開瀏覽器
const merge = require('webpack-merge');//webpack配置文件合並
const path = require("path");
const baseWebpackConfig = require("./base.config");//基礎配置
const webpackFile = require("./file.config");//一些路徑配置
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, "../src")
],
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://127.0.0.1:8080/',
secure: false
}
],
/*打開瀏覽器 並打開本項目網址*/
after() {
opn('http://localhost:' + this.port);
}
}
});
module.exports = config;
webpack => file.config.js
module.exports = { devDirectory:'static',/*開發目錄*/ proDirectory:'dist',/*發布目錄*/ resource:'resource',/*靜態資源*/ };
運行效果
項目地址：https://github.com/yangbiaoit/react-webpack/tree/master/02