React+webpack 的开发环境配置步骤（二）

配置步骤（一）：http://blog.csdn.net/cbboke31/article/details/75950094
这里先讲每一步的原因和做法，其他文章会讲怎么快速搭建webpack，不用这么繁琐。文章链接：http://blog.csdn.net/cbboke31/article/details/77175664

目录
二、webpack 升级篇
6. ES6 转ES5模块
7. url和file模块
三、 webpack 高级篇
1.语法检查器eslint
2.uglify 源代码加密压缩
3.moduleconcatenationPlugin
4.devtool
5.happypack
6.dll

---

6.ES6 转ES5模块

由于部分浏览器对ES6的部分语法没有完全兼容，但nodejs已经支持ES6，所以webpack提供了ES6转ES5 的模块。
安装指令（在开发模式使用）：

npm install babel-loader babel-core babel-preset-env webpack --save-dev

如果要支持react，需要安装下面的模块：

npm install babel-preset-es2015 babel-preset-react babel-preset-stage-3 --save-dev

webpack.config.js 的代码：

module.exports = {
...
module:{    
    rules:[
...
   {
        test:/\.jsx$/,
        exclude:/(node_modules|bower_components)/,//排除XXX类型文件
        use:{
            loader:'babel-loader'           
        }
    }
]
}
...
}

在根路径下创建.babelrc 文件

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


}

7.url和file模块
引入url模块处理图片，file模块处理图片外的其他文件类型
指令：

npm install url-loader file-loader --save-dev

webpack.config.js 代码：

module.exports = {
...
    {   //配置辅助loader,处理图片  
        test:/\.(png|jpg|gif)$/,
        loader:'url-loader',
        options:{limit:8192,name:"images/[name].[ext]"}
    },
    { //处理图片外的其他文件类型
        test:/\.(appcache|svg|eot|ttf|woff|woff2|mp3|pdf)(\?|$)/,
        include:path.resolve(__dirname,'src'),
        loader:'file-loader?name=[name].[ext]' 
    }
...
}

三、webpack 高级篇
1.语法检查器eslint
ESLint是一个QA工具，用来避免低级错误和统一代码的风格。
安装指令：

npm install eslint eslint-loader --save-dev  

装完eslint，然后通过init指令创建一个规则文件。

指令：
cd 进入项目文件夹根路径，敲./node_modules/.bin/eslint --init  

? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser, Node
? Do you use CommonJS? Yes
? Do you use JSX? Yes
? Do you use React? Yes
? What style of indentation do you use? Tabs
? What quotes do you use for strings? Single
? What line endings do you use? Windows
? Do you require semicolons? Yes
? What format do you want your config file to be in? JSON

回答完问题后，在根目录下面会生成一个.eslintrc.json格式的文件,并自动安装相应的包。.eslintrc.json
里面的内容可以根据自己的编程习惯在进行微调。ESLINT中文网站
这里先给个样例：

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "extends": "plugin:react/recommended",
    "parserOptions": {
        "ecmaVersion": 8,//ECMAScript syntax 最新版本
        "ecmaFeatures": {
            "impliedStrict": true,
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "semi": [
            "error",
            "always"
        ],              
        "no-debugger": "error",//不允许用debugger这个关键字
        "no-dupe-args": "error",//不允许函数参数同名
        "no-caller": "error",//不允许用callee等，es6严格模式不支持
        "no-unmodified-loop-condition": "error",
        "no-with": "error",//不允许用with来声明
        "no-catch-shadow": "error"
    }
}

webpack.config.js 的配置

module: {
        rules: [
        ...
{
        test:/\.js$/,
        enforce:'pre',
       loader:'eslint-loader',
       include:path.resolve(__dirname,'src')
    }
...
]
}

2.uglify 源代码加密压缩
属于webpack的插件，直接使用就行。

webpack.config.js 代码：
module.exports = {
   ...
 plugins:[
 ..  
new webpack.optimize.UglifyJsPlugin(
{output: { 
    comments:false,//删除代码中所有注释
},
compress:{
 warnings:false,
}
})
]
...
}

4.devtool
webpack 提供的辅助工具，调试的时候能正确的显示源代码出错的行数。eval-soure-map用于开发模式下。其他参数使用环境

module.exports = {
...
devtool:'eval-soure-map'
...
}

5.happypack
让loader多进程去处理文件，加速webpack构建

安装指令：
npm install happypack --save-dev

var os = require('os');//os.cpus().Length 一般会取不到值，这里直接size:4,而不是size:os.cpus().length
var Happypack = require('happypack');
var happypackThreadPool = Happypack.ThreadPool({size:4});//size:os.cpus().Lengt根据电脑的idle，配置当前最大的线程数量
module.config.js 下面的配置
module.exports = {
...
module:{
    rules:[
 {
        test:/\.js$/,    
        include:path.resolve(__dirname),
        loader:'happypack/loader?id=happybabel'

    }
]
}
plugins:[
new Happypack({
    id:"happybabel",
    loaders:['babel-loader'],
    threadPool:happypackThreadPool,
    cache:true,
    verbose:true
}),
]
}

6.dll
在根目录上创建一个webpack.dll.config.js文件

//webpack.dll.config.js 的内容：
const webpack = require('webpack');
const path = require("path");
const fs=require('fs');
const vendors = [

  'react' //这里添加第三方库文件

];

module.exports = {

  entry: {
    vendor: vendors,
  },
  output: {
    path: path.join(__dirname+'/build'),
    filename: '[name].[chunkhash].js',
    library: '[name]_[chunkhash]',
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname+"/build"+'/manifest.json'),
      name: '[name]_[chunkhash]',
      context: __dirname,
    }),
  ],
};
//console.log(path.join(__dirname+"/build"));

在Powershell窗口里面敲下面指令：

webpack --config webpack.dll.config.js -p

在build路径下会生成两个文件，一个manifest.json,另一个叫vendor.XXXX.js的文件。vendor.xxx.js 需要在html（这里直接写在html模板里面）里面引入。
webpack.config.js 填加:

 moule.exports = {
 ...
 plugins:[
  ...
 new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./build/manifest.json'),
    }),
    ...
]
....
}

然后在Powershell 里面敲npm start 就好。

参考资料：
1.https://webpack.js.org/loaders/babel-loader/
2.http://blog.csdn.net/lx376693576/article/details/54591142
3.http://www.jianshu.com/p/2bcdce1dc8d4
4.https://github.com/eslint/eslint/
5.http://www.cnblogs.com/yzg1/p/6282791.html
6.https://www.npmjs.com/package/happypack