基于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先關一些代碼
