1, webpack是什么
1), 是一个打包工具,
比gulp, grunt更先进
2), 额外功能
项目部署上线, 清空目录等
hot module reload, 页面刷新后, 数据不变化
3), 打包流程
css, js等打包成bundle.js文件
js: babel-loader 来加载, 编译
最终根据依赖关系生成app.js
split point: 将大文件分割为多个文件, 提升用户体验
2, webpack安装
1), 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
2), 检查npm版本
npm -v
3), 安装webpack到全局
npm install webpack -g
4), 生成package.json
npm init
5), 为项目添加webpack依赖
npm install webpack --save-dev
6), 将js编译打包
webpack hello.js hello.bundle.js
7), 安装css的loader转换器和style的laoder转换器
npm install css-loader style-loader --save-dev
8), 文件变化时, 自动编译
webpack hello.js hello.bundle.js --watch
3, 配置文件
webpack.json.js
# 引入webpack
const webpack = require('webpack');
# 遵循 commonjs规范
module.exports = {