webpack使用

2016-08-20

把运行命令配置到npm的script中

 1 为什么要用npm的script？
 （1）npm 是一个非常好用的用来编译的指令，通过 npm 你可以不用去担心项目中使用了什么技术，你只要调用这个指令就可以了，只要你在 package.json 中设置 scripts 的值就可以了。
 （2）真正开发的时候你的webpack的命令会敲很长，因为有很多命令需要设置，即便你用了配置文件的方式，但一些--colors  --hot这些命令是没法在配置文件中配置的。比如：
webpack-dev-server --devtool eval --progress --colors --hot --content-base build
所以你不可能每次都敲这么长，因而我们就把这一大串配置到npm中

npm的script的使用

 1你首先需要安装webpack，这时候不全局安装
 npm i webpack --save
 2 配置npm 的packge.json文件中
 "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "develop": "webpack --config webpack.develop.config.js",
      "publish": "webpack --config webpack.publish.config.js"
}
3 在根目录打开的命令窗口运行
npm run develop

为发布目录启动服务

1、安装webpack-dev-server
   npm   i   webpack-dev-server   –save-dev
2、调整npm的package.json scripts 部分中开发命令的配置
   {
    "scripts": {
    "develop": "webpack-dev-server  --config webpack.develop.config.js --devtool eval --progress --colors --hot --content-base src",
   "publish": "webpack --config webpack.publish.config.js",
   "watch": "webpack --config webpack.develop.config.js --watch --hot"
    }
   }
   注释：
   webpack-dev-server - 在 localhost:8080 建立一个 Web 服务器
   --devtool eval - 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
   --progress - 显示合并代码进度
   --colors -- hot，命令行中显示颜色！
   --content-base  指向设置的输出目录//这点一定是我们的发布目录
3  访问 http://localhost:8080 你会看到效果。
   总的来说，当你运行 npm run develop 的时候，会启动一个 Web 服务器，然后监听文件修改，然后自动重新合并你的代码。真的非常简洁！

   注意
   (1)用webpack-dev-server生成bundle.js文件是在内存中的，并没有实际生成
   (2)如果引用的文件夹中已经有bundle.js就不会自动刷新了，你需要先把bundle.js文件手动删除
   （3）用webstorm的注意了，因为他是自动保存的，所以可能识别的比较慢，你需要手动的ctrl+s一下

webpack.config.js相关属性的作用

commonjs：使用js语法要求后端语言的规范，模块化，后端语言需要具备的一些要求，可以http,操作文件

webpack就是一款模块打包工具（压缩，合并，混淆+结合插件的代码转化，自动化一气呵成）

webpack的优点

1 模块来源广泛
2 模块规范支持全面
3插件机制完善，实现同样模块化，容易拓展

##总结
webpack 可以运行两种方式cli option(命令行及设置)
通过webpack.config.js文件运行
所有的配置属性都在module.exports={内部配置}

babel是什么？

答：语法转化器
js代码转换工具
可以转换ES6,ES7,react，默认只转换ES6，关键字presets:['es2015']

语法转换工具
它本身自带cli，可以通过npm i babel-cli -g

 的全局命令工具，来完成单独的转换
它也提供了别的工具使用的支持
比如browerify babelify,webpack babel-core....
缺点：babel 默认只提供了es6关键字的转换 let const. 如果涉及到es6或者es7函数，就需要特定的配置插件
1 安装babel 核心的工具包
2 配置babel 的预设 babel 师一个语法转换器，包含es6/7/react,就是告诉babel要将什么转换什么