Webpack+Gulp+React+ES6開發

前言

webpack是模塊加載器+打包工具的集大成者。開發React堪稱利器，jsx語法、es6，混淆、模塊加載都很智能且功能強大，可是對於css、圖片的加載器還不是像grunt/gulp那麼豐富易於修改編輯，功能上略微不是那麼方便，例如css中的圖片地址修改或是須要替換cdn路徑，圖片壓縮在webpack下修改極爲不方便。因此用webpack模塊加載編譯jsx、es6，用gulp壓縮編譯scss、img、spriter

1、安裝

在gulp中安裝webpack及相關的插件

npm install --save-dev path webpack gulp-webpack react react-dom babel-loader babel-preset-es2015 babel-preset-react 

插件做用編譯react、jsx、es6等等

2、配置

預先查看webpack教程

webpack教程一

webpack教程二

webpack+React配合開發

在根目錄配置webpack.config.js

/*加載 文件路徑*/
var path              = require('path'),
    webpack           = require('webpack'),
    root_path         = path.resolve(__dirname),
    src_path          = path.resolve(root_path, 'src___phone'),//入口根目錄
    dist_path         = path.resolve(root_path, 'dist___phone');//出口根目錄

入口文件

entry: {
    index: path.resolve(src_path, 'js/index.jsx'),
    mobile:path.resolve(src_path, 'js/mobile.js')
  }

出口文件

output: {
    path: dist_path,
    filename: 'js/[name].js'
  }

路徑是在出口文件的js下。

開啓錯誤提示

resolve不用再在加載器後面使用-loader

//enable dev source map
  devtool: 'eval-source-map',//開啓錯誤定位
  resolve: {
      extensions: ['', '.js', '.jsx']
  }

.js、.jsx文件匹配配置

    loaders: [
      {
        test: /\.js$/, //正則
        include: src_path,//路徑
        loader: "babel",//加載器
        presets: ['es2015', 'react']//es6
      },{
        test: /\.jsx?$/,
        include: src_path,
        loader: 'babel',
        query: {presets: ['es2015', 'react']}
      }
    ]
  }

plugins配置--抽取公共的js，此功能極其強大且智能

new webpack.optimize.CommonsChunkPlugin('common', 'js/common.js')

截圖

根目錄加入.babelrc配置

{
  "presets": ["react", "es2015"]
}

和.eslintrc配置

{
  "parserOptions": {
    "ecmaVersion": 6,
    "ecmaFeatures": {
      "experimentalObjectRestSpread": true,
      "jsx": true
    },
    "sourceType": "module"
  },

  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },

  "plugins": [
    "standard",
    "promise"
  ],

  "globals": {
    "document": true,
    "navigator": true,
    "window": true,
    "react": true
  },

  "parser": "babel-eslint",

  "rules": {
    "accessor-pairs": 2, 
    "arrow-parens": [2, "as-needed"],
    "arrow-spacing": [2, { "before": true, "after": true }], 
    "block-spacing": [2, "always"],
    "brace-style": [2, "1tbs", { "allowSingleLine": true }],
    "comma-dangle": [2, "never"],
    "comma-spacing": [2, { "before": false, "after": true }],
    "comma-style": [2, "last"],
    "constructor-super": 2,
    "curly": [2, "multi-line"],
    "dot-location": [2, "property"],
    "eol-last": 2,
    "eqeqeq": [2, "allow-null"],
    "generator-star-spacing": [2, { "before": true, "after": true }],
    "handle-callback-err": [2, "^(err|error)$" ],
    "indent": [2, "tab", { "SwitchCase": 1 }],
    "keyword-spacing": [2, {"before": true, "after": true, "overrides": {}}],
    "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
    "new-cap": [2, { "newIsCap": true, "capIsNew": false }],
    "new-parens": 2,
    "no-array-constructor": 2,
    "no-caller": 2,
    "no-class-assign": 2,
    "no-cond-assign": 2,
    "no-const-assign": 2,
    "no-control-regex": 2,
    "no-debugger": 2,
    "no-delete-var": 2,
    "no-dupe-args": 2,
    "no-dupe-class-members": 2,
    "no-dupe-keys": 2,
    "no-duplicate-case": 2,
    "no-empty-character-class": 2,
    "no-eval": 2,
    "no-ex-assign": 2,
    "no-extend-native": 2,
    "no-extra-bind": 2,
    "no-extra-boolean-cast": 2,
    "no-extra-parens": [2, "functions"],
    "no-fallthrough": 2,
    "no-floating-decimal": 2,
    "no-func-assign": 2,
    "no-implied-eval": 2,
    "no-inner-declarations": [2, "functions"],
    "no-invalid-regexp": 2,
    "no-irregular-whitespace": 2,
    "no-iterator": 2,
    "no-label-var": 2,
    "no-labels": [2, {"allowLoop": false, "allowSwitch": false}],
    "no-lone-blocks": 2,
    "no-mixed-spaces-and-tabs": 2,
    "no-multi-spaces": 2,
    "no-multi-str": 2,
    "no-multiple-empty-lines": [2, { "max": 2 }],
    "no-native-reassign": 2,
    "no-negated-in-lhs": 2,
    "no-new": 2,
    "no-new-func": 2,
    "no-new-object": 2,
    "no-new-require": 2,
    "no-new-wrappers": 2,
    "no-obj-calls": 2,
    "no-octal": 2,
    "no-octal-escape": 2,
    "no-proto": 2,
    "no-redeclare": 2,
    "no-regex-spaces": 2,
    "no-return-assign": 2,
    "no-self-compare": 2,
    "no-sequences": 2,
    "no-shadow-restricted-names": 2,
    "no-spaced-func": 2,
    "no-sparse-arrays": 2,
    "no-this-before-super": 2,
    "no-throw-literal": 2,
    "no-trailing-spaces": 2,
    "no-undef": 2,
    "no-undef-init": 2,
    "no-unexpected-multiline": 2,
    "no-unneeded-ternary": [2, { "defaultAssignment": false }],
    "no-unreachable": 2,
    "no-unused-vars": [2, { "vars": "all", "args": "none" }],
    "no-useless-call": 2,
    "no-with": 2,
    "one-var": [2, { "initialized": "never" }],
    "operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }],
    "quotes": [2, "single", "avoid-escape"],
    "radix": 2,
    "semi": [2, "always"],
    "semi-spacing": [2, { "before": false, "after": true }],
    "space-before-blocks": [2, "always"],
    "space-before-function-paren": [2, "never"],
    "space-in-parens": [2, "never"],
    "space-infix-ops": 2,
    "space-unary-ops": [2, { "words": true, "nonwords": false }],
    "spaced-comment": [2, "always", { "markers": ["global", "globals", "eslint", "eslint-disable", "*package", "!", ","] }],
    "use-isnan": 2,
    "valid-typeof": 2,
    "wrap-iife": [2, "any"],
    "yoda": [2, "never"],

    "standard/object-curly-even-spacing": [2, "either"],
    "standard/array-bracket-even-spacing": [2, "either"],
    "standard/computed-property-even-spacing": [2, "even"]
  }
}

3、gulp配置

引入插件

task webpack

watch

最後加入default便可。

在入口文件寫react及es6測試

4、運行

cmd中進入根目錄運行 gulp

頁面效果如圖

修改index.js mobile.js，本地服務器實時刷新

5、加強

由於js開啓了錯誤定位，因此文件很是大，發佈上線後，須要去掉source-map，減少體積。引入了react後index有1.7M，在package.json中的"scripts"新增命令

"build": "webpack --progress --profile --colors --config webpack.production.config.js"

配置config webpack.production.config.js 將source-map去掉 發佈時候運行

npm run build 

生成文件及出口設置可在配置文件中設置

如今只有201k了，體積大大減少了，能夠說是翻天覆地的變化。

6、總結

用webpack模塊加載js、提取公共的部分、用gulp壓縮編譯scss、圖片、spriter等等。

webpack+gulp+react配置後，react、es六、jsx不再擔憂低版本瀏覽器不支持了