react+webpack開發環境搭建

時間 2019-11-10

標籤 react+webpack react webpack 開發環境搭建欄目 React 简体版

原文原文鏈接

###Webpack配置
####目錄結構
    --your project
      |--app
        |--components
          |--productBox.jsx
        |--main.js
      |--build
        |--index.html
        |--bundle.js(該文件是webpack打包後生成的)

####初始化,會直接建立package.json文件
    npm init
####安裝webpack及react相關依賴包
    npm install react react-dom react-router react-kendo react-hot-loader react-transform-hmr --save-dev
    npm install webpack webpack-dev-server --save-dev
    npm install babel-core babel-loader babel-plugin-react-transform babel-preset-es2015 babel-preset-react --save-dev
    npm install css-loader less less-loader graceful html-webpack-plugin lodash recluster --save-devcss

####package.json
    {
      "name": "group",
      "version": "1.0.0",
      "description": "group app framework",
      "main": "index.js",
      "scripts": {
        "start": "webpack-dev-server --hot --progress --colors",
        "build": "webpack --progress --colors",
        "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
      },
      "repository": {
        "type": "git",
        "url": ".."
      },
      "keywords": [
        "react",
        "webpack"
      ],
      "author": "yixuan",
      "devDependencies": {
        "babel-core": "^6.5.2",
        "babel-loader": "^6.2.5",
        "babel-plugin-react-transform": "^2.0.2",
        "css-loader": "^0.23.1",
        "less": "^2.6.0",
        "less-loader": "^2.2.2",
        "react-hot-loader": "^1.3.0",
        "react-transform-hmr": "^1.0.4",
        "webpack": "^1.12.11",
        "webpack-dev-server": "^1.14.1"
      },
      "dependencies": {
          "babel-preset-es2015": "^6.14.0",
            "babel-preset-react": "^6.11.1",
            "graceful": "^1.0.1",
            "html-webpack-plugin": "^2.22.0",
            "lodash": "^3.10.1",
            "react": "^15.3.1",
            "react-dom": "^15.3.1",
            "react-kendo": "^0.13.11",
        "react-router": "^2.0.0",
        "recluster": "^0.3.7"
      }
    }
####webpack.config.js
    var webpack = require('webpack');html

    module.exports = {
    entry: [
      'webpack/hot/only-dev-server',
      "./app/main.js"
    ],
    output: {
        path: './build',
        filename: "bundle.js"
    },
    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
            { test: /\.css$/, loader: "style!css" },
            {test: /\.less/,loader: 'style-loader!css-loader!less-loader'},
            {
              test: /\.js$/,
              exclude: /node_modules/,
              loader: "babel-loader",
              query:
                {
                  presets:['react','es2015']
                }
            }
        ]
    },
    resolve:{
        extensions:['','.js','.json']
    },
    devServer: {
        hot: true,
        inline: true
    },
    plugins: [
      new webpack.NoErrorsPlugin(),
      new webpack.HotModuleReplacementPlugin()
    ]
    };node