使用webpack搭建简易react

• 首先搭建简单的webpack项目

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {

    entry: './src/index.js',

    plugins: [
        
        new CleanWebpackPlugin(),
        
        new HtmlWebpackPlugin({
            template: 'index.html'
        })
    ],

    devServer: {

        contentBase: './dist'
    },

    output: {

        filename: 'app.js',

        path: path.resolve(__dirname, 'dist')
    }
}

// 目录结构
react-webpack-deom
    |- node_modules
    |- src
        |- index.js
    index.html
    package.json
    webpack.config.js

• 处理react

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {

    entry: './src/index.js',
    
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env', '@babel/preset-react']
                }
            }
        }]
    },

    plugins: [
        
        new CleanWebpackPlugin(),
        
        new HtmlWebpackPlugin({
            template: 'index.html'
        })
    ],

    devServer: {

        contentBase: './dist'
    },

    output: {

        filename: 'app.js',

        path: path.resolve(__dirname, 'dist')
    }
}

• 需要安装的模块

// package.json
{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "start": "webpack-dev-server --open",
        "build": "webpack"
    },
    "dependencies": {
        "@babel/core": "^7.4.3",
        "@babel/preset-env": "^7.4.3",
        "babel-loader": "^8.0.5",
        "react": "^16.8.6",
        "react-dom": "^16.8.6"
    },
    "devDependencies": {
        "@babel/preset-react": "^7.0.0",
        "clean-webpack-plugin": "^2.0.1",
        "html-webpack-plugin": "^3.2.0",
        "webpack": "^4.30.0",
        "webpack-cli": "^3.3.0",
        "webpack-dev-server": "^3.3.1"
    }
}

-github

demo

• 参考
  webpack 中文文档 -- babel-loader
  babel 中文文档 -- @babel/preset-react

• 其它

webpack 和 babel官方文档有些地方有必要好好看看

来了上海，遇到一些人、事，挺好，挺幸运

console.log('hello life, hello shang hai, hello world, hello front-end, ...')