今天研究了下webpack拴竹，
現(xiàn)將相關(guān)知識(shí)整理如下：
一、安裝及使用
1星持、使用Node.js cd到指定文件夾中钻趋，再采用npm init 初始化得到package.json等文件；
2毁靶、安裝webpack （安裝 webpack 依賴）
npm install webpack --save-dev
3胧奔、首先創(chuàng)建一個(gè)靜態(tài)頁面 index.html 和一個(gè) JS 入口文件 entry.js
我的index.html 文件：
<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
我的 entry.js文件：
// entry.js
document.write('It works.')
4、使用webpack entry.js bundle.js命令预吆，來編譯 entry.js 并打包到 bundle.js葡盗；
此時(shí)我們用瀏覽器打開 index.html 將會(huì)看到 It works.字樣。
5啡浊、接下來添加一個(gè)模塊 module.js 并修改入口 entry.js
// module.js
module.exports = 'It works from module.js.'
// entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模塊
6觅够、使用webpack entry.js bundle.js重新打包
此后我們刷新頁面，會(huì)看到頁面變成了 It works.It works from module.js.字樣巷嚣。
二喘先、Loader
由于webpack本身只能處理javascript模塊，如果需要處理其他類型的文件比如css等廷粒，則需要使用到loader窘拯；loader其實(shí)就是一個(gè)模塊與文件間的轉(zhuǎn)換器；它本身是一個(gè)函數(shù)坝茎，接受源文件作為參數(shù)涤姊，返回轉(zhuǎn)換的結(jié)果。這樣我們就可以通過require處理來加載任何類型的模塊或文件比如CoffeeScript嗤放、LESS思喊、JSX或圖片。
Loader 本身也是運(yùn)行在 node.js 環(huán)境中的 JavaScript 模塊次酌，它通常會(huì)返回一個(gè)函數(shù)恨课。大多數(shù)情況下，我們通過 npm 來管理 loader岳服，但是你也可以在項(xiàng)目中自己寫 loader 模塊剂公。
7、使用npm install css-loader style-loader安裝 loader
我們要在頁面中引入一個(gè) CSS 文件 style.css吊宋，首頁將 style.css 也看成是一個(gè)模塊纲辽，然后用 css-loader 來讀取它，再用 style-loader 把它插入到頁面中。
8拖吼、新建 style.css文件并修改之前的 entry.js文件：
/* style.css 文件*/
body { background: yellow; }
/* entry.js 文件*/
require("!style!css!./style.css") // 載入 style.css
document.write('It works.')
document.write(require('./module.js'))
9鳞上、再使用webpack entry.js bundle.js重新編譯打包，刷新頁面绿贞，就可以看到黃色的頁面背景了因块。
如果每次 require CSS 文件的時(shí)候都要寫 loader 前綴橘原，是一件很繁瑣的事情籍铁。我們可以根據(jù)模塊類型（擴(kuò)展名）來自動(dòng)綁定需要的 loader。將 entry.js 中的 require("!style!css!./style.css") 修改為 require("./style.css") 趾断，然后執(zhí)行：
$ webpack entry.js bundle.js --module-bind 'css=style!css'
# 有些環(huán)境下可能需要使用雙引號(hào)
$ webpack entry.js bundle.js --module-bind "css=style!css"
這樣就不需要在entry.js中寫那么多 loader 前綴了拒名。
三、配置文件
我們在執(zhí)行webpack命令除了使用命令行的方式傳入?yún)?shù)芋酌，還可使用指定的配置文件來執(zhí)行的方式增显。
默認(rèn)情況下，會(huì)搜索當(dāng)前目錄的 webpack.config.js 文件脐帝，這個(gè)文件是一個(gè) node.js 模塊同云，返回一個(gè) json 格式的配置信息對象，或者通過 --config 選項(xiàng)來指定配置文件堵腹。
10炸站、確認(rèn)根目錄的package.json
{
"name": "webpack-example",
"version": "1.0.0",
"description": "A simple webpack example.",
"main": "bundle.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"webpack"
],
"author": "zhaoda",
"license": "MIT",
"devDependencies": {
"css-loader": "^0.21.0",
"style-loader": "^0.13.0",
"webpack": "^1.12.2"
}
}
11、創(chuàng)建一個(gè)配置文件 webpack.config.js
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
}
}
12疚顷、同時(shí)簡化 entry.js 中的 style.css 加載方式：require('./style.css')
13旱易、最后運(yùn)行webpack
四、插件
插件可以完成更多 loader 不能完成的功能腿堤。
插件的使用一般是在 webpack 的配置信息 plugins 選項(xiàng)中指定阀坏。
Webpack 本身內(nèi)置了一些常用的插件，還可以通過 npm 安裝第三方插件笆檀。
接下來忌堂，我們利用一個(gè)最簡單的 BannerPlugin 內(nèi)置插件來實(shí)踐插件的配置和運(yùn)行，這個(gè)插件的作用是給輸出的文件頭部添加注釋信息酗洒。
14浸船、修改 webpack.config.js，添加 plugins：
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
},
plugins: [
new webpack.BannerPlugin('This file is created by zhaoda')
]
}
15寝蹈、然后運(yùn)行 webpack李命，打開 bundle.js，可以看到文件頭部出現(xiàn)了我們指定的注釋信息箫老；
/*! This file is created by zhaoda */
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
// 后面代碼省略
五封字、開發(fā)環(huán)境
當(dāng)項(xiàng)目逐漸變大，webpack 的編譯時(shí)間會(huì)變長，可以通過參數(shù)讓編譯的輸出內(nèi)容帶有進(jìn)度和顏色阔籽。
$ webpack --progress --colors
如果不想每次修改模塊后都重新編譯流妻，那么可以啟動(dòng)監(jiān)聽模式。開啟監(jiān)聽模式后笆制，沒有變化的模塊會(huì)在編譯后緩存到內(nèi)存中绅这，而不會(huì)每次都被重新編譯，所以監(jiān)聽模式的整體速度是很快的在辆。
$ webpack --progress --colors --watch
當(dāng)然证薇，使用 webpack-dev-server 開發(fā)服務(wù)是一個(gè)更好的選擇。它將在 localhost:8080 啟動(dòng)一個(gè) express 靜態(tài)資源 web 服務(wù)器匆篓，并且會(huì)以監(jiān)聽模式自動(dòng)運(yùn)行 webpack浑度，在瀏覽器打開 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以瀏覽項(xiàng)目中的頁面和編譯后的資源輸出，并且通過一個(gè) socket.io 服務(wù)實(shí)時(shí)監(jiān)聽它們的變化并自動(dòng)刷新頁面鸦概。
# 安裝
$ npm install webpack-dev-server -g
# 運(yùn)行
$ webpack-dev-server --progress --colors
以上根據(jù) Webpack 中文指南 做了適當(dāng)修改箩张。
webpack官網(wǎng)：https://webpack.github.io/
** webpack其他資料推薦：**
1、入門Webpack窗市，看這篇就夠了
https://gitbook.cn/books/599270d5625e0436309466c7/index.html
2先慷、一小時(shí)包教會(huì) —— webpack 入門指南
3、中文文檔 https://webpack.docschina.org/guides/
**本文版權(quán)歸本人即簡書筆名：該賬戶已被查封 所有咨察，如需轉(zhuǎn)載請注明出處论熙。謝謝！ *
