webpack配置react

  1. 初始化package.json
    npm init

  2. 安装babel-loader(新版8.0.0报错)
    cnpm install [email protected] babel-preset-es2015 babel-preset-react --save-dev

  3. 安装webpack
    cnpm install webpack webpack-cli webpack-dev-server --save-dev

  4. 创建webpack.config.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    var path = require('path');
    var webpack = require('webpack');
    var HtmlwebpackPlugin = require('html-webpack-plugin');

    var ROOT_PATH = path.resolve(__dirname);
    var APP_PATH = path.resolve(ROOT_PATH, 'app');
    var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

    module.exports= {
    // @babel/polyfill兼容ie9,ie10
    entry: ["@babel/polyfill", path.resolve(APP_PATH, 'index.jsx')],
    output: {
    path: BUILD_PATH,
    filename: 'bundle.js'
    },
    mode: "development",
    // mode: "production",
    //enable dev source map
    devtool: 'eval-source-map',
    //enable dev server
    devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
    port: 3000
    },
    //babel重要的loader在这里
    module: {
    rules: [
    {
    test: /\.jsx?$/,
    loader: 'babel-loader',
    include: APP_PATH
    },
    {
    test: /\.scss$/,
    loaders: ['style-loader', 'css-loader', 'sass-loader']
    },
    {
    test: /\.(png|jpg|gif|svg)$/,
    loader: 'file-loader',
    options: { name: '[name].[ext]?[hash]' }
    },
    {
    test: /\.(gif|jpg|png|woff|woff2|svg|eot|ttf)\??.*$/,
    loader: 'url-loader?limit=50000&name=[path][name].[ext]'
    }
    ]
    },
    resolve: {
    extensions: ['*', '.js', '.jsx']
    },
    plugins: [
    new HtmlwebpackPlugin({
    title: 'My first react app',
    template: "index.html",
    filename: "index.html",
    inject: true
    })
    ]
    }
  5. npm中添加webpack启动命令

    1
    2
    3
    "dev": "webpack-dev-server --progress --profile --colors --hot",
    "build": "webpack --progress --profile --colors",
    "test": "karma start"
  6. 安装React和React-Dom
    cnpm install react react-dom --save

  7. 应用中使用sass
    cnpm install css-loader style-loader sass-loader node-sass --save-dev

  8. 创建 .babelrc文件,babel分离

    1
    2
    3
    4
    5
    6
    7
    8
    {
    "presets": ["react", "es2015"],
    "env": {
    "development": {
    "presets": ["react-hmre"]
    }
    }
    }
  9. 安装其他loader
    cnpm install html-webpack-plugin file-loader babel-core url-loader babel-preset-react-hmre @babel/polyfill --save-dev

  10. loader汇总

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-react-hmre": "^1.1.1",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.9.3",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "url-loader": "^1.1.1",
    "webpack": "^4.17.1",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.7"
    },
    "dependencies": {
    "@babel/polyfill": "^7.2.5",
    "react": "^16.8.4",
    "react-dom": "^16.8.4"
    }
  11. 创建index.html模板页
    title为<title><%= htmlWebpackPlugin.options.title %></title>
    body为<div id="root"></div>

  12. 创建src文件夹,src文件夹下创建index.jsx

    1
    2
    3
    4
    5
    6
    7
    import React from 'react';
    import ReactDOM from 'react-dom';
    // ...
    ReactDOM.render(
    element,
    document.getElementById('root')
    );
  13. 执行命令npm run dev,浏览器打开http://localhost:3000/