webpack全接触

nodejs&npm

l安装nodejs

  https://nodejs.org/en/

lnpm

  NodeJS包管理和分发工具

  http://npmjs.org/

lnpm常用命令

  npm init创建package.json文件

  npm install <module-name>-g/--save-dev/--save  安装模块

  npm update <module-name >  更新模块

  npm uninstall <module-name >卸载模块

webpack

lwebpack简介

  一款模块加载器兼打包工具

  支持AMD/CMD写法

  处理依赖关系，然后解析出模块之间的依赖，将代码打包

  把各种资源，都作为模块来使用和处理。

  比如 jscss Less Sass等。。。

  http://webpack.github.io/

   

l安装webpack

  npm install webpack -g

        安装后就在命令行中使用webpack命令

  把依赖写入package.json

  npm install webpack --save-dev

lwebpack命令

  打包命令 webpack app.js output.js

  app.js         打包的入口文件

  output.js   打包后的文件

   

l模块加载器（loader）

  各种不同文件类型的资源, Webpack 有对应的模块 loader

  安装加载器

  npm install xxx-loader --save-dev

  例如：css-loader style-loader 处理css文件和样式

  更多参考：

  http://webpack.github.io/docs/using-loaders.html

webpack配置说明

lwebpack的配置项说明

  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

lwebpack-dev-server

  轻量级的服务器

  修改文件源码后，自动刷新页面就能把修改同步到页面上

l安装webpack-dev-server

  npm install webpack-dev-server  -g

  安装后在命令行中使用webpack-dev-server命令

  如果8080端口被占用会报错，这时可以通过webpack-dev-server --port 3000 修改端口号

  接下来把依赖写入package.json

  npm install webpack-dev-server  --save-dev

  最后使用命令 webpack-dev-server --hot --inline做到自动刷新

  如果是更换端口号之后再自动刷新可以把命令合起来

  webpack-dev-server --port 3000 --hot --inline

  在package.json中配置服务的根目录，在scripts里加入下面命令

   "build":"webpack-dev-server --port 3000 --hot --inline --content-base  这里写目录的路径"

l在webpack.config.js中配置服务

  devServer: {  }

  参考：http://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option

html-webpack-plugin

l自动生成html文件

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

l使用

  在webpack.config.js中引入

  var htmlWebpackPlugin = require('html-webpack-plugin');

 

l在plugins中配置

  plugins:[

  newhtmlWebpackPlugin({

  title:"My first react app",

  chunks:[“index”]    //当打包生成多个js模块时，这里定义每个html中引用的是那个打包生成的js模块

  })

  ]

l设置启动的配置文件

在package.json的script中设置

"start_html":"webpack --config webpack.html.config.js"  //这里的 webpack.html.config.js是要启动的配置文件名称

这时候启动服务的时候不能再用webpack这个命令，因为他默认找的启动配置文件是 webpack.config.js，这里要用npm run start_html代替 

babel---转码器

lbabel作用

  将ES6代码转为ES5代码 

  官网：http://babeljs.io/

l安装babel-cli

  npm install babel-cli -g

       安装后就在命令行中使用babel命令

  把依赖写入package.json

  npm install babel-cli --save-dev

  转换命令：babelapp.js --out-filebuild.js

l使用es2015

  npm install --save-dev babel-preset-es2015

  在目录下创建.babelrc文件，设置为

  {"presets":["es2015"]}

webpack+babel

l安装babel-loader加载器

  使用webpack处理文件中ec6语法

  在webpack.config.js中加入对应的处理

  {

  test:/\.js$/

  loader：'babel',

  query:['es2015']

  }

react

l安装react模块

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

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

l热加载

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

  在loader中修改为：

  loaders:['react-hot','babel?presets[]=es2015&presets[]=react']

  include:path.resolve(__dirname,"react")