# 項目初始化 ## 搭建開發環境 >[danger] 這里需要打開筆記中的復習資料webpack > webpack.config.js ``` const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry:path.join(__dirname,'./src/main.js'), output: { path: path.join(__dirname,'./dist/'), filename: "bundle.js" }, plugins: [ new HtmlWebpackPlugin({ template: path.join(__dirname,'./src/index.html'), filename: "index.html" }) ], module: { rules: [ {test:/\.css$/, use: ['style-loader','css-loader?modules&localIdentName=[name]__[local]--[hash:5]']}, {test:/\.scss$/, use: ['style-loader','css-loader','sass-loader']}, {test:/\.less$/, use: ['style-loader','css-loader','less-loader']}, {test:/\.(png|jpg|jpeg|gif)$/, use: ['url-loader']}, {test:/\.jsx?$/, use: ['babel-loader'], exclude: path.join(__dirname,'./node_modules')}, ] } } ``` ## 安裝React依賴 `yarn add react react-dom react-router-dom` 支持jsx `yarn add babel-preset-react` 配置.babelrc ``` { "presets": ["env","stage-0","react"], "plugins": ["transform-runtime"] } ``` ## 實現路由環境 ### 修改main.js ``` import React from "react"; import ReactDOM from 'react-dom' import {HashRouter, Route} from "react-router-dom"; import App from "./App"; ReactDOM.render( <HashRouter> <Route path={'/'} component={App}></Route> </HashRouter> , document.getElementById('app')) ``` ### 修改app.js ``` import React, {Component, Fragment} from 'react'; import {HashRouter, Link, Redirect, Route, Switch} from "react-router-dom"; import Home from "./Pages/Home"; import Movie from "/Pages/Movie"; import About from "./Pages/About"; export default class App extends Component { constructor(props) { super(props); this.state = {} } render() { return ( <Fragment> <Link to={'/home'}>首頁</Link> <Link to={'/movie'}>電影</Link> <Link to={'/about'}>詳情</Link> <hr/> <Switch> <Route path={'/home'} component={Home}/> <Route path={'/movie'} component={Movie}/> <Route path={'/about'} component={About}/> <Redirect to={'/home'} /> </Switch> </Fragment> ); } } ``` ### 路由懶加載 webpack配置 ``` {test:/\.jsx?$/, use: ['babel-loader','lazyload-loader'], exclude: path.join(__dirname,'./node_modules')}, ``` 項目中使用 ``` import Home from "./Pages/Home"; import Movie from "lazy!./Pages/Movie"; import About from "lazy!./Pages/About"; ``` # 總結 本節課其實還是對之前所有學習東西的復習。