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”是可以省略不