最简单的webpack，package.json与app.js

//webpack.config.js
const webpack = require('webpack');
const path = require('path')
/*const HtmlWebpackPlugin = require('html-webpack-plugin')*/
module.exports = {
    entry: [
        "webpack-dev-server/client?http://0.0.0.0:3000",
        "webpack/hot/only-dev-server",
        // 这里是你的入口文件
        './component/index.js'
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    /*plugins: [
        new HtmlWebpackPlugin({
            template: './index.tpl.html',
            inject: 'body',
            filename: './index.html'
        })
    ],*/
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env', 'react']
                }
            }
        }, {
            test: /\.css$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }, {
                loader: "sass-loader"
            }]
        }, {
            test: /\.scss$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }, {
                loader: "sass-loader"
            }]
        }, {
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
            use: {
                loader: "file-loader"
            }
        }, {
            test: /\.(woff|woff2)$/,
            use: {
                loader: "url-loader?prefix=font/&limit=5000"
            }
        }, {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            use: {
                loader: "url-loader?limit=10000&mimetype=application/octet-stream"
            }
        }, {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            use: {
                loader: "url-loader?limit=10000&mimetype=image/svg+xml"
            }
        }]
    }
};


//package.json
{
  "name": "",
  "version": "1.0.0",
  "description": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "ajv": "^5.2.2",
    "babel-cli": "^6.24.1",
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.5.3",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-hot-loader": "^1.3.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.5.2",
    "webpack-dev-server": "^2.7.1"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "css-loader": "^0.28.7",
    "react": "^15.6.1",
    "react-bootstrap": "^0.31.2",
    "react-dom": "^15.6.1",
    "request": "^2.79.0",
    "style-loader": "^0.18.2",
    "url": "^0.11.0",
    "url-loader": "^0.5.9"
  }
}


//app.js
const webpack = require('webpack')
const WebpackDevServer = require('webpack-dev-server')
const config = require('./webpack.config')
const path = require('path')


new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
contentBase: path.resolve(__dirname, "dist")
}).listen(3000, 'localhost', function(err) {
if (err) {
console.log(err)
}
})


记得在入口文件出加入
if(module.hot){
    module.hot.accept();
}