webpack新建react项目

新建项目文件夹

mkdir react -webpack

cd react -webpack

npm init //生成package.json

安装webpack

npm install -g webpack（安装过的请忽略这一步）//全局安装webpack

npm install --save-dev webpack                 //安装到你的项目目录

安装babel全家桶

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

安装react,react-dom

npm install --save-dev react react-dom

安装css-loader依赖

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

创建react相关页面

创建一个webpack.config.js配置如下

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: path.resolve(__dirname, './src/index.js'),
    output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
    },

    devServer: {
        contentBase: "./dist",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true,//实时刷新
        port: 8080,//设置默认监听端口，如果省略，默认为"8080"
    },

    module: {
        rules: [
        {
            test: /\.json$/,
            loader: "json"
        },
        {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',//在webpack的module部分的loaders里进行配置即可
            query: {
                presets: ['env','react']
            }
        }]
    }
};

Webpack //运行生成bundle.js

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

npm install webpack-cli -D

"scripts": {
    "dev": "webpack-dev-server"
  }