针对 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 ，完美解决！！！！

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