什麼是webpack？
子產品打包工具，它可以分析項目結構，處理js依賴子產品以及編譯一些sass、less、typescript等文法，并将其打包成合适的格式供浏覽器能夠使用。
工作方式：
webpack把我們的項目當做整體，他可以通過給定的一個主檔案（入口檔案）找到項目中所有依賴的檔案，通過loader處理他們并将他們打包成一個浏覽器可識别的js檔案
搭建webpack項目： /全局安裝（建議全局安裝）
npm install -g webpack
//安裝到你的項目目錄
npm install --save-dev webpack
//使用
webpack {entry file/入口檔案} {destination for bundled file/存放bundle.js的地方}
//webpack非全局安裝的情況需要指定webpack的安裝路徑
node_modules/.bin/webpack app/main.js public/bundle.js
以上使用的方式操作複雜，使用起來容易出錯。一般使用配置檔案： 項目下建立webpack.config.js檔案:
module.exports = {//暴露一個對象出去，webpack去讀
entry: __dirname + "/main.js", //唯一入口檔案，__dirname是nodejs的一個全局變量，它指向目前執行腳本所在的目錄（全路徑，計算機絕對路徑）
output: {
path: __dirname + "/public",//指定打包輸出的目錄(自動生成)
filename: "bundle.js"//指定打包輸出的檔案名稱
},
//生成source-map供浏覽器去讀，映射源檔案分離展示友善調試,用'#source-map'也可以
devtool: "#cheap-module-eval-source-map",
//配置loader來處理檔案
module: {
rules: [{//一個loader的具體配置
test: /\.scss$/,//比對的檔案類型
use: [{//loader處理的順序是該數組中從右到左的順序
loader: 'style-loader'//将 JS 字元串生成為 style 節點
},{
loader: 'css-loader'//将 CSS 轉化成 CommonJS 子產品
},{
loader: 'sass-loader'//将sass編譯成css
}]
},{
test: /\.(png|jpeg)$/,
use: [{
loader: 'url-loader',
options: {//配置額外參數
limit: 1024, //限制轉base64的圖檔為1k(1024b)，超過1k的以url傳回,設定此項需要安裝依賴：file-loader，會将圖檔傳到public下
outputPath: 'img/' //指定輸出路徑：放到public下的img檔案下，如果沒有則會自動建立,并且路片路徑自動變成img/***.***
}
}]
}]
}
}
目錄結構（public檔案以及下面所有檔案應該都是由webpack生成的）：
module2.js
module.exports = "font-weight: bold; color: green";
module1.js
let cssText = require("./module2");
module.exports = dom => (dom.style.cssText = cssText);
main.js
let cssModule = require("./src/js/module1");//module1中引用了module2
let cssFile = require("./src/sass/test.scss");//需要sass-loader（依賴node-sass）、css-loader、style-loader
//如果是less則是less-loader（依賴less）、css-loader、style-loader
let imgFile = require("./src/img/dog.png");
let dom = document.querySelector("#box"), img = document.querySelector("#img");
cssModule(dom);
img.src = "public/"+imgFile;
console.log(imgFile);
index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
my first webpack!!
<img id="img" src="">
</div>
<script src="public/bundle.js"></script>
</body>
</html>
package.json
{
"name": "webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"node-sass": "^4.8.3",
"sass-loader": "^6.0.7",
"style-loader": "^0.20.3",
"url-loader": "^1.0.1",
"webpack": "^2.7.0"
}
}
![CSS樣式抽離之 extract-text-webpack-plugin 插件[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)