文章目錄
webpack以前大概粗略看過，現在再回顧學習一下。
webpack是一個module bundler，個包含前端的項目，裡面可能有多個 .js, 多個 .css , 多個靜态圖檔， 多個其他前端資源。
一些 js 資源彼此之前存在依賴關系，當一個頁面需要加載多個 .js 的話，也會拖累整個頁面的加載速度。
是以為了解決這個問題， 如圖所示，webpack 就把左邊的各種各樣的靜态資源，打包成了一個所謂的 assets. 這樣浏覽器加載起來就快多了。
E:\project\webapack_demo cnpm install -g [email protected] 之前已經裝過了，是以直接運作：
webpack 
一堆參數，OK，webpack安裝完成。
在項目目錄下建立一個a.js，輸出“Hello webpack”。
document.write("hello webpack"); 運作打包指令：
webpack a.js bundle.js 
這樣a.js就被打包到了bundle.js中
index.html中引用bundle.js：
<html>
<head>
<script src="bundle.js"></script>
</head>
</html> 直接用浏覽器打開index.html,
上一個方式是把a.js打包，可以直接采用配置的方式。
webpack.config.js：
module.exports = {
entry: './a.js',
output: {
filename: 'bundle.js'
}
}; 再次運作：
直接就可以通路，和上一個效果一樣。
在前面是直接打開html，接下來用的webpack-dex-server是啟動一個伺服器的方式，從伺服器上打開index.html。
ebpack 是用 cnpm 安裝的 1.32.2，考慮到相容性， webpack-dev-server 也不會安裝最新版本，而是與之相容的版本： [email protected]。
運作如下指令進行全局安裝
cnpm install -g [email protected] webpack-dev-server --open 會自動打開與 http 協定關聯的浏覽器，并顯示預設的 index.html 頁面。
webpack-dev-server 支援熱更新。 所謂的熱更新，即在 webpack.config.js 中的 entry 檔案 ( a.js ) 發生了改變之後，會自動運作 webpack, 并且自動重新整理頁面，立即看到修改之後的效果。
為了做到這一點，需要修改 webpack.config.js 檔案。
var webpack = require('webpack') 因為 webpack 子產品是全局的，在某些情況下，通過這種方式導入不能夠被識别，需要進行一次連結：
npm link webpack 不然，
把 webpack.config.js 檔案的内容更新：
var webpack = require('webpack')
module.exports = {
entry: './a.js',
output: {
filename: 'bundle.js'
},
plugins:[
new webpack.HotModuleReplacementPlugin()
],
devServer: {
port:8088,
inline:true,
hot:true
}
} 重新啟動，
修改a.js中的内容，可以實時看到浏覽器更新。
前面的方式，是直接運作 webpack-dev-server 的方式，不過大都數的項目，都會通過npm 的方式運作。
運作如下指令進行 package.json 配置檔案的初始化
npm init -y -y 的意思是都同意~ 就不用挨個挨個手動敲打回車了
在package.json中增加腳本：“dev”: "webpack-dev-server --open"
{
"name": "webpack-demo",
"version": "1.0.0",
"main": "a.js",
"scripts": {
"dev": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^1.13.2"
},
"devDependencies": {},
"description": ""
} 通路測試位址：
http://localhost:8088/ 有時候，會不止一個js檔案，這時候就需要配置多個入口檔案。
修改a.js:
document.write("hello webpack from a.js<br>"); 建立b.js:
document.write("hello webpack from b.js<br>"); 修改配置檔案webpack.config.js:
module.exports = {
entry: {
bundle1: './a.js',
bundle2: './b.js'
},
output: {
filename: '[name].js'
},
devServer: {
port:8088
}
} 修改 index.html:
分别引用兩個打包後的檔案：
<html>
<head>
<script src="bundle1.js"></script>
<script src="bundle2.js"></script>
</head>
</html> 運作測試：
ES6 的全稱是 ECMAScript 6.0，是下一代的 javascript 語言标準。
因為目前 javascript 标準 (ES5) 對于開發大型的 javascritp 應用支援力度不足夠，是以才會推出一個 ES6，期望 js 在大型企業開發領域也有所斬獲。(這玩意兒以前真沒見過）
運作如下指令進行安裝。
npm install --save-dev [email protected] [email protected] [email protected] 文法使用 ES6 的寫法，這個是無法直接在 浏覽器使用的，需要轉換為 ES5 才能夠使用。
const name = 'ES6'
document.write(`hello ${name}`) module.exports = {
entry: './a.js', //入口
output: {
filename: 'bundle.js' //出口
},
devServer: {
port:8088
},
module: {
loaders: [
{
test: /\.js$/, //表示僅僅轉換 .js 檔案
loader: 'babel', //使用babel loader進行 es6 轉換
query:{
presets: ['latest'] //latest 表示用最新的文法規則進行
}
}
]
}
} html>
<head>
<script src="bundle.js"></script>
</head>
</html> 首先運作 webpack, 會把 a.js 轉換為 bundle.js 。
npm run dev 行,webpack先搞到這吧。見過兩三次，還真沒用過，以後用到的時候再接着學。
webpack中文文檔參考：
【1】、
http://how2j.cn/k/webpack/webpack-start/1776.html【2】、
http://how2j.cn/k/webpack/webpack-config/1777.html【3】、
http://how2j.cn/k/webpack/webpack-npm/1783.html【4】、
http://how2j.cn/k/webpack/webpack-webpack-dev-server/1778.html【5】、
http://how2j.cn/k/webpack/webpack-multiple-entry/1779.html【6】、
http://how2j.cn/k/webpack/webpack-babal-loader/1780.html