主要是针对 webpack es6 reactWeb 安装使用及其所遇到的问题，
为了不耽误大家宝贵的时间及其阅读繁琐，我先一次性的把安装使用的步骤介绍完，然后在分析所遇到的问题！
安装使用
使用node npm进行安装，首先，我先附上webpack.config.js的代码，再进一步使用：
webpack.config.js
代码语言：javascript复制//webpack.config.js
var webpack = require('webpack'),
HtmlWebpackPlugin = require('html-webpack-plugin'),
ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'eval-source-map',
entry: __dirname "/webpck/app/main.js", //已多次提及的唯一入口文件
output: {
path: __dirname "/dist/public", //打包后的文件存放的地方,注：“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录。
filename: "bundle.js" //打包后输出文件的文件名
},
devServer: {
contentBase: "/webpck/public", //本地服务器所加载的页面所在的目录
colors: true, //终端中输出结果为彩色
historyApiFallback: true, //不跳转
inline: true //实时刷新
},
/*loaders*/
module: { //在配置文件里添加JSON loader
loaders: [
{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015']
}
},
{test: /.json$/,loader: "json"},
{test: /.css$/, loader: "style!css" },
{test: /.less$/,loader: 'style!css!less'},
{test: /.(png|jpg|jpeg|gif|woff)$/, loader: 'url?limit=8192' },
{test: /.(otf|eot|ttf)$/, loader: "file?prefix=font/" },
{test: /.svg$/, loader: "file" }]
},
postcss: [
require('autoprefixer') //调用autoprefixer插件,加入各个浏览器的前缀
],
plugins: [
new HtmlWebpackPlugin({
template: __dirname "/webpck/app/index.html" //new 一个这个插件的实例，并传入相关的参数
}),
new webpack.HotModuleReplacementPlugin(), //热加载插件
new webpack.optimize.OccurenceOrderPlugin(),
new ExtractTextPlugin("style.css")
],
}以上就是我的webpack.config.js配置信息，不过你也可自己写！
安装命令：
接下来就根据webpack.config.js的配置进行安装 *
这是实现webpack es6 react 所有安装命令：
代码语言：javascript复制//首先安装 webpack 跟 react reactDOM 插件
npm install --save webpack react react-dom
//其次，继续安装webpack.config.js所需要的配置
npm install --save html-webpack-plugin extract-text-webpack-plugin
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
npm install --save autoprefixer
npm i style-loader -D
npm i css-loader -D附：这里babel已经废弃，将其移动到babel-core中，如果安装了babel，请卸载：
npm uninstall babel –save-dev
不然运行webpack的时候会报各种各样的错误信息！
ok，试运行，OK，没问题！
=====接下来，说下使用的时候遇到的问题：======
问题1：
描述：使用webpack 打包后，使用es6的import引入文件的时候
运行的时候 import不存在问题！
例如：
如果你不想使用gulp去解决import不存在的情况下，使用webpack进行解决，
安装执行命令即可
npm install –save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
问题2：
当你使用ES6的 import 引用css 的时候，例如：
在运行 webpack 的时候，报错：
你可能会怀疑，是webpack.config.js配置信息，出问题
但检查半天不是这里的问题，那么问题来了，这么解决，
上面的配置是说，对于拓展名是 .css 的文件，使用加载器 style!css（这边中间有一个感叹号，意思是：先是用 css 加载器处理，然后使用 style 加载器处理）。完整的写法是：style-loader!css-loader, 其中，-loader可以省略。而这里的，style-loader 和css-loader 就需要你 npm 安装下了。
运行命令行：
$ npm i style-loader -D $ npm i css-loader -D
在运行webpack，ok ，完美解决！！！！
代码链接：在这里，希望可以帮到你！
