webpack 学习笔记
webpack ？
1、模块化
2、自定义文件或npm install
3、静态文件模块化
4、借助于插件和加载器
优势：
1、代码分离
2、装载器（CSS、sass、JSX .....）
3、智能解析（require（“./template”+name+".js"））
css-loader style-loader css的两种装载器
Bable ES6---ES5
webpack使用
安装 npm install -g webpack
//之后创建一个文件夹，进入当前文件中，
npm init
//创建package.json文件。
webpack app.js bundle.js //将app.js打包成bundle.js
//在index.html中引入bundel.js即可，每次修改内容都需要执行一次
webpack app.js bundle.js
// 或者在第一次执行 webpack app.js bundle.js --watch 实时监听，以后每次修改只需要刷新页面即可。
webpack 应用于第三方下载的库 例如jQuery
安装jQuery的依赖 npm install jquery --save
静态文件打包 CSS文件
需要装载器 安装css-loader style-loader
npm install css-loader style-loader --save-dev
在js文件中引用时
require('!style-loader!css-loader!./style.css')
多个CSS文件，优化使用webpack.config.js webpack运行的入口文件
image.png
webpack app.js bundle.js --watch 起来的，，当向停止的时候可以使用Ctrl+C
安装npm install -g webpack-dev-server --save-dev
配置package.json中的scripts
image.png
构建加启动 npm run build
npm start
启动之后在浏览器中访问http://localhost:8080/ 修改文件内容实时监听
Babel
下载插件和装载器
npm install babel-core babel-loader babel-preset-es2015 --save-dev
在webpac.config.js中配置
image.png
再一次构建运行。
