mkdir  project
type nul > package.json

npm install webpack --save-dev

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

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

npm install --save-dev babel-core babel-loader babel-preset-es2015

npm install --save-dev babel-preset-react babel-preset-stage-0 babel-preset-stage-2

{presets: ['es2015']
}

{"presets": [["es2015", {"modules": false, "loose": true}],"stage-0","stage-2","react"]
}

npm install --save-dev react react-dom react-redux redux

npm install --save-dev path extract-text-webpack-plugin html-webpack-plugin

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

const path = require('path'); // 导入路径包
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {devtool: 'eval-source-map', //开启sourceMap便于调试entry: './src/index.js', //入口文件output: {path: path.resolve(__dirname, 'build'), // 指定打包之后的文件夹filename: '[name].js' // 可以打包为多个文件},// 使用loader模块module: {rules: [{test: /\.css$/,use: ['style-loader', {loader: 'css-loader',options: {// modules: true // 设置css模块化,详情参考https://github.com/css-modules/css-modules}}]}, {test: /\.(jsx$|js)$/,loader: 'babel-loader', exclude: /(node_modules|bower_components)/, //需要排除的目录include: __dirname}]},// 配置devServer各种参数devServer: {hot: true, // 配置HMR之后可以选择开启historyApiFallback: true, // 不跳转inline: true // 实时刷新},plugins: [new HtmlWebpackPlugin({template: './index.html' // 模版文件}),new webpack.HotModuleReplacementPlugin() // 热加载插件]
}

const path = require('path'); // 导入路径包
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CleanPlugin = require('clean-webpack-plugin')//webpack插件，用于清除目录文件module.exports = {entry: './src/index.js', //入口文件output: {path: path.resolve(__dirname, 'build'), // 指定打包之后的文件夹filename: '[name]-[hash].js' // 可以打包为多个文件},// 使用loader模块module: {rules: [{test: /\.css$/,use: ['style-loader', {loader: 'css-loader',options: {}}]}, {test: /\.(jsx$|js)$/,loader: 'babel-loader', //此处不能用use，不知道为啥exclude: /(node_modules|bower_components)/, //需要排除的目录include: __dirname}]},plugins: [new HtmlWebpackPlugin({template: './index.html' // 模版文件}),new CleanPlugin(['build']),new webpack.optimize.CommonsChunkPlugin({name: 'vendors' // 将公共模块提取，生成名为`vendors`的chunk}),new webpack.optimize.UglifyJsPlugin({ //压缩js代码compress: {warnings: false}}),new ExtractTextPlugin('[name]-[hash].css'),//定义环境变量production,定义后就不不把提示的东西打包进去new webpack.DefinePlugin({'process.env': {NODE_ENV: '"production"'}})]
}