二九、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']  }

    2). baberc 配置