React webpack开发环境配置

const webpack = require('webpack');
const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: {
        build: path.resolve(__dirname, 'src/main.js')
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /.js$/,
                exclude: /\.node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['react', 'es2015']
                    }
                }

            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({//把编译后的代码插入html，html是手动加的，自动生成失败了
            filename:'index.html',
            template: path.resolve(__dirname, 'index.html')
        })
    ],
    devtool: 'cheap-module-source-map',//显示第几行错误，如果有错的话
    devServer: {   //热加载
        clientLogLevel: 'none',
        hot: true,
        port: 3000,
        contentBase: "./",
        open: false,
        lazy: false
    }
}

1.webpack dev server 如果要局部刷新，除了基本的设置还需要在代码入口处加上下面一行：

if (module.hot) { module.hot.accept(); }

• -p 相当于--optimize-minimize --define process.env.NODE_ENV="'production'"

• --progress 控制台显示进度

• --color 控制台显示颜色

• --config 修改默认执行的webpack.config.js的行为，可以按照指定的文件 执行

启动命令: webpack-dev-server --progress --watch --config config/webpack.dev.js
上面已经废弃，完整版配置看这里https://github.com/ShiChenCong/react-ts-webpack