webpack react 项目

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 }

View Code

 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 }

View Code

　　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);

View Code

　　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);

View Code

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;

View Code