React+Webpack搭建入門

1. 新建文件夾react-demo：

mkdir react-demo
cd react-demo 

2. 初始化：npm init，生成package.json文件

3. 接下來安裝react 與 webpack

npm install --save react react-dom
npm install --save-dev webpack

4. 新建webpack.config.js文件

簡單的weback配置以下：

const webpack = require('webpack');
const path = require('path');
const HTMLWebpackPlugn = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        contentBase: './dist',
        hot: true
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugn({
            template: './index.html'
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    'babel-loader'
                ]
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]'
                ]
            }
        ]
    },
    devtool: 'inline-source-map',

};

 

注意點：

• html-webpack-plugin，用於自動生成html文件，並將css與編譯生成的bundle.js插入到生成的html文件中。另外，可配置template文件，將根據這個template文件來自動生成html文件，須要安裝插件：

  npm install --save-dev html-webpack-plugin
  npm install --save-dev html-webpack-template

• clean-webpack-plugin：每次編譯時先將編譯目錄dist清空

  npm install --save-dev clean-webpack-plugin

• webpack.HotModuleReplacementPlugin，這個插件的做用是，容許模塊在運行時更新，頁面不須要所有刷新

• style-loader、css-loader用於處理css文件，經過開啓modules可啓用CSS Modules，並設置樣式類名

  npm install --save-dev style-loader css-loader

  css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]

• 安裝webpack-dev-server，啓用熱加載

  npm install --save-dev webpack-dev-server

• 若使用jsx，須要編譯jsx的工具，這兒使用babel，須要安裝：

  npm install --save-dev babel-core babel-loader babel-preset-react

  若是使用es6，須要安裝：

  npm install --save-dev babel-preset-es2015

  而且，須要在根目錄下新建.babelrc文件：

  {
      "presets": ["react", "es2015"]
  }

  　 

• 支持decorator

npm install --save-dev babel-plugin-transform-decorators-legacy

• async/await

npm install --save-dev babel-plugin-transform-async-to-generator

• 若是使用redux & 路由，須要安裝redux、react-redux、react-router、react-router-redux

 

最後，package.json文件以下：

{
  "name": "react-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.4",
    "html-webpack-plugin": "^2.30.1",
    "html-webpack-template": "^5.6.0",
    "style-loader": "^0.18.2",
    "webpack": "^3.4.1",
    "webpack-dev-server": "^2.6.1"
  }
}

 

經過設置「scripts」：

npm run dev至關於執行webpack-dev-server

npm run build至關於執行webpack