webpack 配置react腳手架 配置檔案

出於省事的目的，不用自己去記。 搬運來，算是記個筆記
英文地址，猛擊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"
  ]
}  

  var merge = require('webpack-merge')
  var webpack = require('webpack')
  var baseWebpackConfig = require('./webpack.config');

 module.exports = merge(baseWebpackConfig, {

devtool: 'source-map',
 plugins: [

new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify('development')
  }
}),
 ]
  })