出于省事的目的，不用自己去记。 搬运来，算是记个笔记
英文地址，猛击http://www.pro-react.com/materials/appendixA/
中文地址，猛击http://www.jianshu.com/p/42e11515c10f
PS.在配置loaders的loader关键字时加上后面的“-loader”后缀。新版做的规定，网上之前的文章并没有提及，算是个坑。webpack配置是做简单的配置，根据需要可以自己修改。
文件夹基本结构
安装 webpack
确保 系统中已安装node.js 通过npm安装 webpack，新建文件（例如 reactapp）cd命令进入该文件夹
//全局安装
npm install -g webpack
//安装到你的项目目录
npm install –save-dev webpack
初始化 生成package.json文件
终端中使用npm init命令可以自动创建
npm init
输入这个命令后，终端会提示填写名称，描述，作者等信息，回车默认即可。
package.json文件最终版本如下
`var path = require(‘path’);
var webpack = require(‘webpack’); //加载webpack依赖包
var HtmlWebpackPlugin = require(‘html-webpack-plugin’);
var ExtractTextPlugin = require(‘extract-text-webpack-plugin’);
module.exports = {
devtool: ‘eval-source-map’,
entry: dirname + “/app/main.js”,
output: {
path: dirname + “/build”,
//输出文件
filename: “[name]-[hash].js”
},
devServer: {
contentBase: “./build”,//本地服务器所加载的页面所在的目录
colors: true,//终端中输出结果为彩色
historyApiFallback: true,//不跳转
inline: true,//实时刷新
hot: true
} ,
module: {
loaders: [
{
test: /.js?$/,
exclude: /node_modules/,
loader: ‘babel-loader’,
},
{ test: /.json$/,loader: “json-loader” },
{ test: /.css$/, loader: ‘style-loader!css-loader’ }, //分离js 和css文件 ExtractTextPlugin.extract({ fallback: ‘style-loader’, use: ‘css-loader’ })//
//打包css文件
{ test: /.scss$/, loader: ‘style-loader!css-loader!sass-loader’}, //分离js 和css文件 ExtractTextPlugin.extract({ fallback: ‘style-loader’, use: ‘css-loader!sass-loader’ })//
//编译sass文件
{ test: /.(png|jpg)$/, loader: ‘url-loader?limit=8192’}
//对图片进行打包
]
},
postcss: [
require(‘autoprefixer’)//调用autoprefixer插件 ],
resolve: {
//自动扩展文件后缀名
extensions: [‘.js’, ‘.json’, ‘.scss’, ‘.css’,’.jsx’]
} ,
plugins: [
new HtmlWebpackPlugin({
template: __dirname + “/app/index.html”
}),
new webpack.HotModuleReplacementPlugin(),
new ExtractTextPlugin(“[name]-[hash].css”),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin(“style.css”)
]
};
.babelrc文件
{
“presets”: [“react”, “es2015”],
“env”: {
“development”: {
“plugins”: [[“react-transform”, {
“transforms”: [{
“transform”: “react-transform-hmr”,
“imports”: [“react”],
“locals”: [“module”]
}]
} ] ]
} } } `
安装babel
//安装
npm install –save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react
插件部分
安装postcss-loader 和 autoprefixer（自动添加前缀的插件）
//安装
npm install –save-dev postcss-loader autoprefixer
安装css-loader 和 style-loader
//安装
npm install –save-dev style-loader css-loader
Hot Module Replacement（HMR）是webpack里很有用的一个插件，修改组件代码后，自动刷新实时预览修改后的效果
安装react-transform-hmr 修改babel文件
//安装
npm install –save-dev babel-plugin-react-transform react-transform-hmr
HtmlWebpackPlugin
作用是依据一个简单的模板，生成最终的Html5文件，文件中自动引用打包后的JS文件。每次编译在文件名中插入不同的哈希值
//安装
npm install –save-dev html-webpack-plugin
优化插件
OccurenceOrder 和 UglifyJS plugins 都是内置插件
npm install –save-dev extract-text-webpack-plugin
eslint babel-eslint eslint-plugin-react eslint-plugin-babel 纠错工具
中间件服务器脚本
var path = require(‘path’);
var express = require(‘express’);
var webpack = require(‘webpack’);
var config = require(‘./webpack.config’);
var app = express();
var compiler = webpack(config);
var webpackDevOptions = {
noInfo: true,
historyApiFallback: true,
publicPath: config.output.publicPath,
headers: {
‘Access-Control-Allow-Origin’: ‘*’
}
};
app.use(require(‘webpack-dev-middleware’)(compiler, webpackDevOptions));
app.use(require(‘webpack-hot-middleware’)(compiler));
app.get(‘/‘, function(req, res) {
res.sendFile(path.join(__dirname, ‘index.html’));
});
app.listen(8080, ‘localhost’, function(err) {
if (err) {
console.log(err);
return;
}
console.log(‘Listening at http://localhost:8080‘);
});
使用 ESLint
npm install –save-dev babel-eslint eslint eslint-plugin-react
配置 .eslintrc文件
{
“extends”: “eslint:recommended”, //可选”eslint-config-airbnb”
“ecmaFeatures”: {
“jsx”: true,
“modules”: true
},
“env”: {
“browser”: true,
“node”: true,
“es6”: true
},
“parser”: “babel-eslint”,
“rules”: {
“strict”: 0,
“valid-jsdoc”: 2,
“react/jsx-uses-react”: 2,
“react/jsx-uses-vars”: 2,
“react/react-in-jsx-scope”: 2
},
“plugins”: [
“react”
]
}