react+webpack+redux+react-router環境搭建

時間 2019-12-10

標籤 react+webpack+redux+react react webpack redux router 環境搭建欄目 React 简体版

原文原文鏈接

第一步，新建一個文件夾，而後npm init -yes初始化，會生成一個package.json記錄整個項目的依賴包信息css

安裝webpack cnpm i webpack webpack-dev-server --save-devhtml

新建如下目錄文件，node

安裝react包 cnpm i react react-dom redux react-redux redux-thunk react-router --save-devreact

index.html文件內容：webpack

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react-weChat</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

index.jsx文件內容，做爲整個項目的主入口git

import ReactDOM from 'react-dom';
import React, {Component} from 'react';
 
class App extends Component {
    render() {
        return <div>Hello React !!!</div>
    }
}

ReactDOM.render(
    <App/>,
    document.getElementById("root")
)

接下來開始配置webpack.config.js:
webpack四大組成部分：entry,output,module,pluginses6

const srcDir = __dirname + "/src";
const distDir = __dirname + "/dist";

module.exports = {
    entry: [
        srcDir + "/index.jsx" //入口
    ],
    output: {
        path: distDir,//打包後的文件存放地方，會自動新建
        filename: 'index.[hash:7].js'//打包後輸出的文件名，後面跟7位隨機hash值
    },
    devtool: 'source-map',
    devServer: {
        contentBase: './public',//本地服務器所加載的頁面的目錄
        historyApiFallback: true,//不跳轉
        inline: true,//實時刷新
        port: 8090, //端口號
        hot: true
    },
    module:{},
    plugins:[]

再安裝解析jsx的loader及插件去解析jsx和es6語法：cnpm i babel-cli babel-loader babel-preset-env babel-preset-react babel-plugin-react-transform react-transform-hmr --save-devgithub

module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            'env', 'react'
                        ]
                    }
                },
                exclude: /node_modules/
            },



  //.babelrc
    {
      "presets": [
        "react",
        "env"
      ],
      "env": {
        "development": {
          "plugins": [
            [
              "react-transform",
              {
                "transforms": [
                  {
                    "transform": "react-transform-hmr",
                    "imports": [
                      "react"
                    ],
                    "locals": [
                      "module"
                    ]
                  }
                ]
              }
            ]
          ]
        }
      }
    }

cnpm i html-webpack-plugin --save-devweb

const HtmlWebpackPlugin = require("html-webpack-plugin");//生成新的html文件

plugins: [
        
        new HtmlWebpackPlugin({//根據模板引入css,js最終生成的html文件
            filename: 'index.html',//生成文件存放路徑
            template: './public/index.html',//html模板路徑
        }),

cnpm i extract-text-webpack-plugin clean-webpack-plugin --save-devnpm

const ExtractTextPlugin = require('extract-text-webpack-plugin');//分離css和js
const CleanWebpackPlugin = require('clean-webpack-plugin');//清緩存


new ExtractTextPlugin('style.css'),//獨立導出css
    new CleanWebpackPlugin('dist/*.*', {
        root: __dirname,
        verbose: true,
        dry: false
    })

cnpm i style-loader css-loader postcss-loader autoprefixer --save-dev

{
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader" //在html中插入<style>標籤
                    },
                    {
                        loader: "css-loader",//獲取引用資源，如@import,url()
                        options: {
                            modules: true,//啓用css modules
                            localIdentName: '[name__[local]--[hash:base64:5]]'//指定css的類名格式，避免全局污染
                        }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            plugins:[
                                require('autoprefixer')({
                                    browsers:['last 5 version']
                                })
                            ]
                        }
                    }
                ]
            },

cnpm i less sass less-loader sass-loader stylus-loader node-sass --save-dev

{
                test:/\.less$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders:2
                        }
                    },
                    {
                        loader: "postcss-loader",//自動加前綴
                        options: {
                            plugins:[
                                require('autoprefixer')({
                                    browsers:['last 5 version']
                                })
                            ]
                        }

                    },
                    {
                        loader: "less-loader"
                    }
                ]
            },
            {
              test:/\.scss$/,
              use:[
                  {
                      loader: "style-loader"
                  },
                  {
                      loader: "css-loader",
                      options: {
                          importLoader:1,
                      }
                  },
                  {
                      loader: "sass-loader"
                  },
                  {
                      loader: "postcss-loader",
                      options: {
                          plugins:[
                              require('autoprefixer')({
                                  browsers:['last 5 version']
                              })
                          ]
                      }
                  }
              ]
            },

cnpm i file-loader url-loader --save-dev

{
    test: /\.(png|jpg|gif|woff|svg|eot|woff2|tff)$/,
    use: 'url-loader?limit=8129', 
    //注意後面那個limit的參數，當你圖片大小小於這個限制的時候，會自動啓用base64編碼圖片
    exclude: /node_modules/
}

再加一些webpack的插件

const webpack = require("webpack");

 new webpack.HotModuleReplacementPlugin(),//熱加載插件
 new webpack.optimize.OccurrenceOrderPlugin(),
 new webpack.optimize.UglifyJsPlugin(),//壓縮

//package.json
"scripts": {
"start": "webpack-dev-server --progress",
"build": "webpack --config ./webpack.production.config.js --progress && babel dist --out-dir dist"
},

完整版代碼請參考：github源代碼
代理：

devServer: {
    contentBase: './public',//本地服務器所加載的頁面的目錄
    historyApiFallback: true,//不跳轉
    inline: true,//實時刷新
    port: 8090, //端口號
    hot: true,
    proxy:{
        '/api1':{
            target:'http://10.7.10
            107:8001',
            changeOrigin:true,
            pathRewrite:{'^/api':''}
        },
        '/api2':{
            target:'http://10.7.10.138:4000',
            changeOrigin:true,
            pathRewrite:{'^/api2':''}
        }
},

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。