webpack+babel+react操作小结

最近学习了一下Webpack,个人感觉还是非常实用的,现在总结一下自己的学习笔记。

什么是 Webpack

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资

webpack+babel+react操作小结

Webpack 的特点

1、代码拆分

Webpack 有两种组织模块依赖的方式,同步和异步。异步依赖作为分割点,形成一个新的块。在优化了依赖树后,每一个异步区块都作为一个文件被打包。

2、Loader

Webpack 本身只能处理原生的 JavaScript 模块,但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样,任何资源都可以成为 Webpack 可以处理的模块。

3、智能解析

Webpack 有一个智能解析器,几乎可以处理任何第三方库,无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候,允许使用动态表达式 require("./templates/" + name + ".jade")。

4、插件系统

Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的,还可以开发和使用开源的 Webpack 插件,来满足各式各样的需求。

快速运行

安装nodejs

安装npm (NodeJS包管理和分发工具)

  npm常用命令
npm init 创建package.json文件
npm install <module-name> -g/--save-dev/--save 安装模块
npm update <module-name > 更新模块
npm uninstall <module-name > 卸载模块

安装webpack

用 npm 安装 Webpack
npm install webpack -g
安装后就在命令行中使用 webpack命令
把依赖写入 package.json
npm install webpack --save-dev

webpack命令

打包命令 webpack app.js output.js
app.js 打包的入口文件
output.js 打包后的文件

模块加载器(loader)

各种不同文件类型的资源, Webpack 有对应的模块 loader
安装加载器
npm install xxx-loader --save-dev
例如:css-loader style-loader 处理css文件和样式
更多参考:
http://webpack.github.io/docs/using-loaders.html

webpack的配置项说明

     entry:     打包的入口文件  String|Object
output: 配置打包结果 Object
path: 定义输出文件路径
filename: 指定打包文件名称
module: 定义了对模块的处理逻辑 Object
loaders: 定义了一系列的加载器 Array
[{
test: 正则,匹配到的文件后缀名
loader/loaders:string|array,处理匹配到的文件
include:String|Array 包含的文件夹
exclude:String|Array 排除的文件夹
}]
resolve:{
extensions:['','.js',".css",“jsx”] //自动补全识别后缀
}

webpack-dev-server

轻量级的服务器
修改文件源码后,自动刷新页面就能把修改同步到页面上

安装webpack-dev-server

           npm install webpack-dev-server  -g
安装后在命令行中使用 webpack-dev-server命令
把依赖写入 package.json
npm install webpack-dev-server --save-dev
使用命令 webpack-dev-server --hot --inline 做到自动刷新

在webpack.config.js中配置服务

自动生成html文件

安装  npm install html-webpack-plugin --save-dev

 使用

在webpack.config.js中引入
var htmlWebpackPlugin = require('html-webpack-plugin');

在plugins中配置

    plugins:[
new htmlWebpackPlugin({
title:"My first react app",
chunks:[“index”]
})
]

         babel作用

将ES6代码转为ES5代码   

官网:http://babeljs.io/

安装babel-cli

        npm install babel-cli -g
安装后就在命令行中使用 babel 命令
把依赖写入 package.json
npm install babel-cli --save-dev
转换命令:babel app.js --out-file build.js

使用es2015 

       npm install --save-dev babel-preset-es2015
在目录下创建.babelrc文件,设置为
{"presets": ["es2015"]}

安装babel-loader加载器

使用webpack处理文件中ec6语法
在webpack.config.js中加入对应的处理
{
test: /\.js$/
loader:'babel',
query:['es2015']
}

安装react模块

npm install react react-dom babel-preset-react --save-dev

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

热加载

      npm install react-hot-loader --save-dev

在loader中修改为:
loaders: ['react-hot','babel?presets[]=es2015&presets[]=react']
include:path.resolve(__dirname,"react")
上一篇:使用vue-cli快速搭建大型单页面应用开发环境


下一篇:Effetive Java 22 Favor static member classes over nonstatic