1.npm install react react-dom --save
2.npm install webpack --save-dev
3.项目目录
4.package.josn
1 { 2 "name": "my-app", 3 "version": "0.1.0", 4 "private": true, 5 "dependencies": { 6 "react": "^16.4.1", 7 "react-dom": "^16.4.1", 8 "react-redux": "^5.0.7", 9 "react-router": "^4.3.1", 10 "react-router-dom": "^4.3.1", 11 "react-scripts": "1.1.4", 12 "redux": "^4.0.0", 13 "redux-logger": "^3.0.6", 14 "redux-thunk": "^2.3.0" 15 }, 16 "scripts": { 17 "start": "webpack-dev-server --inline --color --hot --config ./webpack/webpack.dev.config.js", 18 "build": "webpack --config ./webpack/webpack.prod.config.js", 19 "test": "react-scripts test --env=jsdom", 20 "eject": "react-scripts eject" 21 }, 22 "devDependencies": { 23 "babel-core": "^6.26.3", 24 "babel-loader": "^7.1.5", 25 "babel-preset-env": "^1.7.0", 26 "babel-preset-stage-2": "^6.24.1", 27 "clean-webpack-plugin": "^0.1.19", 28 "css-loader": "^1.0.0", 29 "csv-loader": "^3.0.2", 30 "file-loader": "^1.1.11", 31 "html-loader": "^0.5.5", 32 "html-webpack-plugin": "^3.2.0", 33 "mini-css-extract-plugin": "^0.4.1", 34 "open-browser-webpack-plugin": "^0.0.5", 35 "raw-loader": "^0.5.1", 36 "style-loader": "^0.21.0", 37 "webpack": "^4.16.3", 38 "webpack-cli": "^3.1.0", 39 "webpack-dev-server": "^3.1.5", 40 "webpack-merge": "^4.1.3", 41 "xml-loader": "^1.2.1" 42 } 43 }
5.webpack配置
webpack.base.config.js
1 const webpack = require('webpack'); 2 const path = require('path'); 3 const CleanWebpackPlugin = require('clean-webpack-plugin'); 4 const HtmlWebpackPlugin = require('html-webpack-plugin');//html插件,需要安装依赖项 npm install html-webpack-plugin --save-dev 5 const MiniCssExtractPlugin = require("mini-css-extract-plugin");//压缩css文件 6 module.exports = { 7 devtool:false, 8 entry:{ 9 main: path.join(__dirname,"../src/index.js"), //入口文件 10 common:['react','react-dom'] 11 }, 12 output:{ 13 path:path.join(__dirname,"../build"),//出口文件 14 filename:"[name].js", 15 }, 16 resolve:{ 17 extensions:['.js','.jsx','json','.css'], //需要编译的文件类型 18 }, 19 performance: { 20 hints: false 21 }, 22 module:{ 23 rules: [ 24 { 25 test:/\.css$/, 26 use: [ 27 'style-loader', 28 'css-loader' 29 ] 30 }, 31 { 32 test: /\.(js|jsx)$/, 33 loader: 'babel-loader', 34 exclude: /node_modules/ 35 }, 36 { 37 test: /\.(png|svg|jpg|gif)$/, 38 use: [ 39 'file-loader' 40 ] 41 }, 42 { 43 test: /\.(woff|woff2|eot|ttf|otf)$/, 44 use: [ 45 'file-loader' 46 ] 47 }, 48 { 49 test: /\.(csv|tsv)$/, 50 use: [ 51 'csv-loader' 52 ] 53 }, 54 { 55 test: /\.xml$/, 56 use: [ 57 'xml-loader' 58 ] 59 }, 60 { 61 test: /\.(ico)$/, 62 use:"raw-loader" 63 } 64 ] 65 }, 66 plugins:[ 67 new CleanWebpackPlugin(['dist']), 68 new HtmlWebpackPlugin({ filename: "index.html", template: path.join(__dirname, "../public/index.html") }), 69 new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css" }), 70 new webpack.NamedModulesPlugin() 71 ] 72 }
webpack.dev.config.js
1 const path = require("path"); 2 const merge = require("webpack-merge");//文件合并 3 const webpackConfigBase = require("./webpack.base.config"); 4 const openBrowserPlugin = require('open-browser-webpack-plugin');//在浏览器中打开程序 5 6 const webpackConfigDev = { 7 mode:'development', 8 plugins:[ 9 new openBrowserPlugin({url:"http://localhost:3000"}) 10 ], 11 devServer:{ 12 contentBase: path.join(__dirname,"../public"), 13 hot: true, 14 host:'0.0.0.0', 15 inline: true, 16 port: 3000, 17 } 18 } 19 module.exports = merge(webpackConfigBase, webpackConfigDev);
webpack.prod.config.js
1 const path = require("path"); 2 const webpackConfigBase = require("./webpack.base.config"); 3 const CleanWebpackPlugin = require("clean-webpack-plugin"); 4 const merge = require("webpack-merge"); 5 const webpackConfigProd = { 6 devtool:false, 7 mode: "production", 8 plugins:[ 9 new CleanWebpackPlugin(["build"],{ 10 root: path.join(__dirname,"../") 11 }) 12 ] 13 }; 14 module.exports = merge(webpackConfigBase, webpackConfigProd);
6.route.js
1 import React from 'react'; 2 import { BrowserRouter, Switch,Route, Redirect} from 'react-router-dom'; 3 4 import App from './pages/home/App' 5 import Root from './Root' 6 7 const RouteConfig = ( 8 <BrowserRouter> 9 <div className='page'> 10 <Root/> 11 <Switch> 12 <Route path="/" component={App}></Route> 13 </Switch> 14 </div> 15 </BrowserRouter> 16 ) 17 18 export default RouteConfig;