针对 webpack + es6 + react 安装使用及其遇到的问题！

主要是针对 webpack + es6 + reactWeb 安装使用及其所遇到的问题，

为了不耽误大家宝贵的时间及其阅读繁琐，我先一次性的把安装使用的步骤介绍完，然后在分析所遇到的问题！

安装使用

---

使用node npm进行安装，首先，我先附上webpack.config.js的代码，再进一步使用：

webpack.config.js

//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 所有安装命令：

//首先安装 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 ，完美解决！！！！

---

代码链接：在这里，希望可以帮到你！