Webpack官網(wǎng)
Webpack在github上的首頁
在releases下面可以看到所有發(fā)布的版本。
一、npm
設(shè)置npm，讓下載更快。在git Bash下運(yùn)行如下命令：
npm config set loglevel http // 知道npm 發(fā)的每一個(gè)請(qǐng)求
npm config set progress false // 關(guān)閉進(jìn)度條
npm config set registry https://registry.npm.taobao.org/ // 從淘寶的服務(wù)器下載各種包
touch ~/.bashrc; echo 'export PHANTOMJS_CDNURL="http://npm.taobao.org/mirrors/phantomjs"' >> ~/.bashrc // 讓 npm 從淘寶下載 phantomjs
touch ~/.bashrc; echo 'export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"' >> ~/.bashrc // 讓 npm 從淘寶下載 SASS
source ~/.bashrc
二、Creating a bundle
mkdir webpack-demo && cd webpack-demo // 創(chuàng)建webpack-demo目錄，并進(jìn)入此目錄
npm init -y // 創(chuàng)建了一個(gè) package.json 文件
npm install --save-dev webpack // 安裝webpack
運(yùn)行完之后如果出現(xiàn)滿滿的英文，就是webpack安裝成功了。
- app/index.js
mkdir app && cd app // 創(chuàng)建app目錄，并進(jìn)入此目錄
touch index.js
編輯index.js文件
function component () {
var element = document.createElement('div');
/* lodash is required for the next line to work */
element.innerHTML = _.join(['Hello','webpack'], ' '); // _.join是lodash 暴露的全局變量
return element;
}
document.body.appendChild(component());
touch index.html // 不是在app目錄下面
此時(shí)的文件結(jié)構(gòu)
.
├── app
│ └── index.js
├── index.html
└── package.json
編輯index.html
<html>
<head>
<title>webpack 2 demo</title>
<script src="https://unpkg.com/lodash@4.16.6"></script> // 使用 script 引入了 lodash v4.16.6。也可以在webpack-demo目錄下運(yùn)行npm install --save lodash，lodash 的源代碼就被下載到 ./node_modules/lodash/ 目錄中
</head>
<body>
<script src="app/index.js"></script>
</body>
</html>
注：Lodash是一個(gè)著名的javascript原生庫，不需要引入其他第三方依賴。是一個(gè)意在提高開發(fā)者效率,提高JS原生方法性能的JS庫。
在 app/index.js 的第一行添加
import _ from 'lodash';
把a(bǔ)pp/index.html改掉
<html>
<head>
<title>webpack 2 demo</title>
- <script src="https://unpkg.com/lodash@4.16.6"></script> //刪除
</head>
<body>
- <script src="app/index.js"></script>
+ <script src="dist/bundle.js"></script> // 新增
</body>
</html>
在控制臺(tái)運(yùn)行：
./node_modules/.bin/webpack app/index.js dist/bundle.js // 將 app/index.js 變成 dist/bundle.js
打開index.html。如果出現(xiàn)“Hello webpack”，則說明成功。
- 文件整體結(jié)構(gòu)
.
├── app
│ └── index.js
├── dist
│ └── bundle.js
├── index.html
├── node_modules/
└── package.json
幾點(diǎn)說明：
1.index.html里面引用的是dist/bundle.js。
2.lodash 被安裝在 node_modules 里面。
3.webpack也被安裝在node_modules里，./node_modules/.bin/webpack是一個(gè)可執(zhí)行文件。
4.webpack和lodash的版本號(hào)都被寫在package.json里面。
三、modify
- 初步改進(jìn)
- 引入jQuery
npm i -S jquery // 在webpack-demo目錄下，npm install --save jquery
這樣jQuery就被下載到node_modules里面。
接著在app/index.js里面引入jQuery。
import _ from 'lodash'
+import j from 'jquery'
function component () {
\- var element = document.createElement('div');
\+ var element = j('<div></div>');
/* lodash is required for the next line to work */
\- element.innerHTML = _.join(['Hello','webpack'], ' ');
\+ element.html(_.join(['Hello','webpack'], ' '))
\- return element;
\+ return element.get(0);
}
document.body.appendChild(component());
在終端運(yùn)行：
./node_modules/.bin/webpack app/index.js dist/bundle.js
在瀏覽器打開index.html，如果看到“Hello webpack”，說明成功引入jquery。
關(guān)于bundle.js里面的內(nèi)容，下次再另外介紹。
- 進(jìn)一步改進(jìn)
因?yàn)槊看味家\(yùn)行./node_modules/.bin/webpack app/index.js dist/bundle.js，很麻煩，所以官網(wǎng)也給出了辦法。
在根目錄下（webpack-demo），新建并編輯 webpack.config.js。
var path = require('path');
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
上面的./node_modules/.bin/webpack app/index.js dist/bundle.js就可以換成./node_modules/.bin/webpack --config webpack.config.js。
此時(shí)的命令依然很長，還可以修改package.json文件。
"scripts": {
\- "test": "echo \"Error: no test specified\" && exit 1"
\+ "test": "echo \"Error: no test specified\" && exit 1",
\+ "build": "webpack"
},
"keywords": [],
增加了一個(gè)build，內(nèi)容為webpack。
運(yùn)行npm run build。
npm run bulid等于node_modules里的webpack可執(zhí)行文件，這個(gè)可執(zhí)行文件會(huì)自己去 webpack.config.js 里找 app/index.js、dist 和 bundle.js 三個(gè)關(guān)鍵詞。
- 減小bundle.js體積
因?yàn)榇a沒壓縮，導(dǎo)致bundle.js文件很大。webpack 自帶了一個(gè)壓縮插件 UglifyJsPlugin，只需要在配置文件中引入即可。
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './app/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
]
};
也可以修改build腳本。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
- "build": "webpack"
+ "build": "webpack -p"
},
運(yùn)行./node_modules/.bin/webpack --help可以看到：
官網(wǎng)的解釋
這個(gè)命令會(huì)做三件事：
- 使用webpack自帶的UglifyJsPlugin壓縮插件將代碼進(jìn)行壓縮，減小體積；
- 運(yùn)行l(wèi)oader-options-plugin，它的用途是幫助人們從 webpack 1 遷移至 webpack 2；
- 設(shè)置node的環(huán)境變量。
四、watch
watch: webpack 監(jiān)聽文件變動(dòng)，一旦我們保存了文件，重新 build 代碼。
Development
往下翻到webpack Watch Mode。在package.json文件中修改：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "dev": "webpack --progress --watch"
},
"keywords": [],
運(yùn)行npm run dev。打開 index.html， 編輯 app/index.js，把 Hello 改成 Hi。這時(shí)候 webpack 會(huì)自動(dòng) build ，刷新頁面，就會(huì)出現(xiàn)Hi webpack。
如果要自動(dòng)刷新，可以再往下翻到webpack-dev-server。
修改index.html：
<script src="/bundle.js"></script>
安裝webpack-dev-server：npm install --save-dev webpack-dev-server，再運(yùn)行：node_modules/.bin/webpack-dev-server。
此時(shí)不能直接打開index.html，因?yàn)槁窂讲粚?duì)。打開http://localhost:8080 即可看到Hi webpack。
代碼
