Webpack+Gulp+React+ES6开发

前言

webpack是模块加载器+打包工具的集大成者。开发React堪称利器，jsx语法、es6，混淆、模块加载都很智能且功能强大，但是对于css、图片的加载器还不是像grunt/gulp那么丰富易于修改编辑，功能上略微不是那么方便，例如css中的图片地址修改或是需要替换cdn路径，图片压缩在webpack下修改极为不方便。所以用webpack模块加载编译jsx、es6，用gulp压缩编译scss、img、spriter

一、安装

在gulp中安装webpack及相关的插件

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

插件作用编译react、jsx、es6等等

二、配置

预先查看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"]
  }
}

三、gulp配置

引入插件

task webpack

watch

最后加入default即可。

在入口文件写react及es6测试

四、运行

cmd中进入根目录运行 gulp

页面效果如图

修改index.js mobile.js，本地服务器实时刷新

五、增强

因为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了，体积大大减小了，可以说是翻天覆地的变化。

六、总结

用webpack模块加载js、提取公共的部分、用gulp压缩编译scss、图片、spriter等等。

webpack+gulp+react配置后，react、es6、jsx再也不担心低版本浏览器不支持了