【前端知识点】webpack 打包 + es6 + react入门（一）webpack打包

webpack 打包 + es6 + react入门

本文主要针对webpack打包流程，注意事项，es6新特性变化，以及es6 开发react的入门教程：

• webpack打包流程
• webpack注意事项
• webpack，gulp，grunt差异对比
• webpack进阶：关于加载优化与缓存
• es6 新标准及新特性
• es6 核心特性分析
• react 基本语法
• react 生命周期
• react 父子组件的通信总结

【第一部分】Webpack入门

---

webpack打包流程

---

React开发和模块管理的主流工具webpack也被大家所熟知。
web开发中常用到的静态资源主要有JavaScript、CSS、图片、Jade等文件，webpack中将静态资源文件称之为模块。webpack是一个module bundler(模块打包工具)，其可以兼容多种js书写规范，且可以处理模块间的依赖关系，具有更强大的js模块化的功能。

webpack特性

webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：

序号	特点	备注
1	对 CommonJS 、 AMD 、ES6的语法做了兼容	兼容性强
2	对js、css、图片等资源文件都支持打包	打包范围广
3	串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持	灵活易扩展
4	有独立的配置文件webpack.config.js	独立配置，高内聚
5	可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间	按需，高效，低耦合
6	支持 SourceUrls 和 SourceMaps，易于调试	[不很懂]就是即使代码压缩，也可以转化为非混淆压缩形式调试
7	具有强大的Plugin接口，大多是内部插件，使用起来比较灵活	灵活
8	webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快	异步，缓存，性能优

1.相比Grunt，WebPack除了具备丰富的插件外，同时带有一套加载（Loader）系统。使它支持多种规范的加载方式，包括ES6、CommonJS、AMD等方式，这是Grunt、Gulp所不具备的。
2.代码混淆的角度来看，WebPack更加的极致
3.代码分片为处理单元（而不是文件），使得文件的分片更为灵活。

Webpack安装和配置

1.安装

webpack 可以作为 全局的npm模块安装，也可以在 当前项目中安装。

npm install -g webpack //全局安装
npm install --save-dev webpack //产品模式用dependencies，开发模式用devDep; save就是存到依赖列表里package.json

全局安装的webpack，直接执行webpack命令，会默认使用当前目录的webpack.config.js作为配置文件。如果要指定另外的配置文件，可以执行：

webpack -config webpack.chauncey.config.js //指定新文件

配置

每个项目下需配置一个webpack.config.js, 如同gulpfile.js/Gruntfile.js， 通俗一点，他就是你的一个初始化设置，配置项，告诉webpack，你想怎么去处理你的文件。

环境变量
通过NODE_ENV可以来设置环境变量（默认值为development）。区分开发和生产环境，对于文件的不同处理。
linux & mac: export NODE_ENV=production
windows:set NODE_ENV=production
运行前可以设置当前环境，SET NODE_ENV=production（开发环境）
set PORT=1234设置接口

entry
entry参数： 打包的输入文件，参数值代表输出后文件形式，字符串（单个文件）、数组（一大个文件）、对象（不同属性为不同文件）

{
    entry: {
        page1: "./page1",
        //支持数组形式，将加载数组中的所有模块，但以最后一个模块作为输出
        page2: ["./entry1", "./entry2"],
        page3: {
            subp1: "./sp1",
            subp2: "./sp2"
        }

    },
    output: {
        path: "dist/js/page",//目标目录【文件夹】
        publicPath: "/output/",
        filename: "[name].bundle.js"
    }
}

output
output参数为对象，定义了输出文件的位置及名字

    output: {
        path: "dist/js/page",//打包文件存放的绝对路径
        publicPath: "/output/",//网站运行时的访问路径
        filename: "[name].bundle.js"//打包后的文件名
    }

当我们在entry中定义构建多个文件时，filename可以对应的更改为[name].js用于定义不同文件构建后的名字.

module
在webpack中JavaScript，CSS，LESS，TypeScript，JSX，CoffeeScript，图片等静态文件都是模块，不同模块的加载是通过模块加载器（webpack-loader）来统一管理的。loaders之间是可以串联的，一个加载器的输出可以作为下一个加载器的输入，最终返回到JavaScript上：

module: {
   //加载器配置
   loaders: [
       //.css 文件使用 style-loader 和 css-loader 来处理
       { test: /\.css$/, loader: 'style-loader!css-loader' },

       //.js 文件使用 jsx-loader 来编译处理
       { test: /\.js$/, loader: 'jsx-loader?harmony' },

       //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
       { test: /\.scss$/, loader: 'style!css!sass?sourceMap'},

       //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
       { test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
   ]
}

其中， test：表示匹配的资源类型；
loader或loaders：表示用来加载这种类型资源的loader（加载器）；[可参考using loaders]
！ 用来定义loader的串联关系，”-loader”是可以省略不