基于node环境，必须确保node已经安装好？
node -v
npm -v
webpack基础入门
官网: http://webpack.github.io/docs/
前身: browserify
缺点，只能转化js
webpack作用?
一切都是模块化(js,css,图片等)
一个模块加载器、打包工具
gulp:
npm install gulp-cli -g
安装webpack:
流程:
-
安装webpack命令环境
cnpm install webpack -g验证ok?
webpack --version package.json 工程文件(需要依赖模块、库描述、版本、作者...)
npm init安装本地webpack
cnpm install webpack -D
webpack第一个小例子:
index.html 页面
entry.js 入口文件
编写咱需要代码
终端: webpack entry.js bundle.js
自动解决依赖:
默认支持 commonJs规范
webpack默认只支持javascript文件
- 需要用加载器(loader)
loader类似一种转化器， 它可以把一个东西，转成另一个
css文件:
style-loader
css-loader
下载: cnpm install style-loader css-loader -D
注意: 在webpack中，多个loader加载
！ -> 连接多个loader
配置 webpack.config.js
作用: 配置一些webpack需要入口、出口、loader
最好用这个
终端: webpack
webpack 开发环境下编译(打包)
webpack -p 生产环境下编译(压缩)
webpack -w 监听文件改动,自动编译(速度快)
webpack -d 开启(生成)source maps (用来调试)
webpack -wdp
不推荐: 如果就不用webpack.config.js,自己定义名字 config.js
运行: 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 配置
webpack-dev-server
安装命令环境:
cnpm install webpack-dev-server -g
listen EACCES 127.0.0.1:8080 此端口号已经被监听过了(端口号被占用)
参数:
webpack-dev-server --port 8088 端口号
webpack-dev-server --inline 改变完代码以后，自动刷新浏览器
webpack-dev-server --hot 热重载(局部更改)
终端: webpack-dev-server --port 8088 --inline --hot
写道webpack.config.js配置文件:
devServer: {
port: 8088,
inline: true
}
把运行命令放到package.json文件:
"scripts":{
"dev": "webpack-dev-server --inline --hot --port 8088"
}
终端: npm run dev
resolve: 配置，省略引入文件名后缀，别名
resolve: {
"extensions": ['', '.js', '.css', '.json', '.jsx'] //可以省略后缀名
}
react配置:
ES6语法: babel-core babel-preste-es2015
babel-loader
babel-preset-react //react的预设
react-hot-loader
-------------------------------
安装react相关库: react , react-dom
--------------------------------
最终编写 React先关一些代码