介紹
權(quán)威版
自我版：
使用
1 Google - webpack
認(rèn)準(zhǔn)官網(wǎng)大門
2 MoudelBundler - tutorial
documentation - 文檔，給高手研究用的川抡。
introducation - 介紹冈爹，單詞儲(chǔ)備夠了嗎船万。
tutorial - 教程街立，新手先看這里吧滨溉。
3 Copy
● -1 安裝Bush / Node / Npm
● 0 設(shè)置npm什湘，調(diào)整使用環(huán)境
npm config set loglevel http 得到每一個(gè)請(qǐng)求
npm config set progress false 關(guān)閉進(jìn)度條
npm config set registry https://registry.npm.taobao.org/ 從淘寶下載
npm config delete registry 如果出現(xiàn)問題就殺了
touch ~/.bashrc; echo 'export PHANTOMJS_CDNURL="http://npm.taobao.org/mirrors/phantomjs"' >> ~/.bashrc 下載 phantomjs
touch ~/.bashrc; echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc 下載 SASS
source ~/.bashrc
● 1 按官網(wǎng)教程走一遍，打開index.html晦攒，看到'Hello,webpack'闽撤，已經(jīng)成功了呢！
1 安裝webpack
mkdir webpack-demo && cd webpack-demo 新建文件夾并進(jìn)入
npm init -y 初始化配置文件package.json
npm install --save-dev webpack 安裝并寫入依賴
2 抄例子
mkdir app && cd app
touch index.js 新建 app/index.js copy
touch index.html 新建 index.html copy
3 安裝依賴
npm install --save lodash 根據(jù)提示安裝lodash
4 使用依賴
照例 app/index.js copy import引入依賴
照例 index.html copy 主文件改為bundle.js（參照6）
5 配置webpack
新建 webpack.config.js copy 這是webpack的配置文件
6 使用配置
配置文件里寫了 入口entry / 出口output = bundle.js / 出口路徑path = dist文件夾
./node_modules/.bin/webpack --config webpack.config.js
▲ 運(yùn)行這個(gè)命令就會(huì)自動(dòng)生成dist/bundle.js
7 改良
上面的命令行太長好麻煩脯颜，在package.json里設(shè)置個(gè)快捷鍵
以后改完代碼運(yùn)行 npm run build 就會(huì)自動(dòng)打包好 `
● 2 復(fù)習(xí)
目前的文檔結(jié)構(gòu)：
webpack-demo
▼ app
?index.js 主文件
▼ dist
?bundle.js 重點(diǎn)：把依賴和代碼打包后的文件
▼ node_modules
? ...... 所有依賴包
index.html
package.json demo的配置
webpack.config.js webpack的配置
4 Run
● 部署到GitHub
1 新建倉庫
New repository 一鍵開啟新倉庫 & 輸入倉庫名
2 按照提示上傳
git init
git config user.name 名字
git config user.email 郵箱
echo '/node_modules/' > .gitignore
git add .
git commit -m 'first commit'
git remote....
git push....
3 刷新后可以看到部署完成哟旗，來在線預(yù)覽一下：
YourName / webpack-demo
[齒輪標(biāo)志]settings
進(jìn)入 -- GitHub Pages -- Source
-- none=> master brunch -- Save
得到預(yù)覽地址 https://YourName .github.io/webpack-demo/
然后加上index.html => 找到正確的頁面地址 就可以線上預(yù)覽了
5 Modify
● 根據(jù)引入loadsh的過程，我們可以改一改梨子栋操，引入其他文件
1 安裝依賴
npm i -S jquery
2 使用依賴
app/index.js 使用import引入
3 合并代碼
npm run build 把index.js以及使用的依賴全部合并到bundle.js里
6 Tip
● 快捷配置
* package.json中配置的script:
● bundle.js文件過大
"build": "webpack-p" npm run build==合并&壓縮
● 每次都要手動(dòng)合并好麻煩
"dev": "webpack --progress --watch" npm run dev == 自動(dòng)更新
● 合并完了還要手動(dòng)刷新好累
側(cè)邊欄--Development ：
<script src="/bundle.js"></script> 修改引用
npm install webpack-dev-server --save-dev 安裝插件
"dev": "webpack-dev-server --open" npm run dev == 自動(dòng)刷新
竟然有后遺癥：上傳到GitHub找不到bundle.js ╥﹏╥
只能用蠢辦法：npm uninstall webpack-dev-server 刪除插件
1 安裝css加載器 npm install css-loader style-loader
2 修改配置 webpack.config.js
module: {
loaders: [
{
test: /\.css$/,
loader: "style-loader!css-loader"
}
]
}
3 在文件中引用 require(' ./css/index.css')`
● **打包jpg **
● **引入JQ **
1 安裝jq npm install jquery --save-dev
2 修改配置 webpack.config.js
var webpack = require("webpack");
plugins:[
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"window.jQuery":"jquery"
})
]