二九、webpack基本使用流程

webpack （基于node）

1 安装
cnpm install webpack -g

2 验证
webpack --version

3 package.json 工程文件（需要依赖模块 库描述 版本。。。）
npm init

4 安装本地webpack
cnpm install webpack -D (生成一个node_modules文件夹)

eg:
index.html 页面

entry.js 入口文件 编写需要的代码 var oApp=document.getElementById('box'); var demo=require('./demo'); oApp.innerHTML='

welcome webpack

'+demo;

终端 webpack entry.js bundle.js (每次跟新都要运行)

自动解决依赖：默认支持commonJS规范

webpack默认只支持JavaScript文件
用其他文件需要用到加载器（loader）
loader类似于一种转化器

css文件： style.loader css.loader
下载 cnpm install style.loader css.loader -D
注意： 用！连接多个loader加载

配置webpack。config.js
作用：配置一些webpack需要的入口、出口、loader

终端 webpack 开发环境下编译（打包）
webpack-p 生产环境下编辑（压缩）
webpack-w 监听文件改动 自动编译
webpack-d 开启（生成）source maps --方便调试
webpack -wdp...

运行 ： webpack --config config.js

ES6-> babel转化

babel使用: cnpm install babel-loader babel-core babel-preset-es2015 -D

导出模块: export default {}

引入模块: import 名字 from 模块名

配置babel预设: 1). webpack.config.js

babel: {
"presets": ['es2015']
}

[/code]
2). baberc 配置