之前沒有接觸過webpack，甚至連它是什么都不知道讯蒲，在接觸requirejs后痊土，對webpack也起了興趣，于是讀了一篇webpack入門文章墨林，大致有了一些了解赁酝，現(xiàn)在對其進行總結，仍然從what,why,how這三個方面來總結旭等，最后做一下引申酌呆，來講解一下webpack如何打包require.js。
什么是webpack
webpack同reqiure.js一樣搔耕，都是模塊打包工具隙袁。但require.js只能將js打包，webpack能打包html,js,css等弃榨。webpack能分析項目結構菩收，找到瀏覽器不能直接運行的拓展語言，如less,scss鲸睛，打包成瀏覽器認識的語言并運行娜饵。
為什么使用
隨著互聯(lián)網(wǎng)時代的發(fā)展，前端也越來越豐富官辈，它們做出的應用各顯身手箱舞。在應用當中，或許擁有復雜的js代碼和各種依賴拳亿，為了簡化代碼晴股，前端出現(xiàn)了各種各樣的工具，如：less风瘦、scss等css預處理器队魏、模塊化公般、typescript等万搔。由于瀏覽器不識別，首先得將這些語言進行額外處理官帘，太過繁瑣瞬雹。webpack的出現(xiàn)恰好解決了這類問題。
如何使用
webpack功能其實很強大刽虹，經(jīng)過學習酗捌，只懂得了一些皮毛：打包js和css，其他的沒有涉獵。
· 安裝webpack
1.新建一個空的文件夾胖缤，在此文件夾打開命令行尚镰，全局安裝webpack，安裝完后會看到文件里多出來一個文件夾：node_modules
//命令行全局安裝
npm install -g webpack
2.在此文件夾創(chuàng)建文件package.json哪廓，使用命令初始化狗唉，初始化完后安裝webpack的依賴包。
后續(xù)再創(chuàng)建兩個文件夾app和index涡真，app里放js代碼分俯，index里放主要的html。再在根目錄下創(chuàng)建webpack.config.js
目錄結構如下(項目不一定按照此目錄來)哆料，main.js缸剪，webpack.config.js以及package.json是核心文件
//初始化
npm init
//安裝依賴包(指定版本)
npm install webpack@1.13.x --save-dev
//或直接安裝最新版本的依賴包
npm install --save-dev webpack
注意：在初始化后，命令行會跳出來一些列問題用來填寫东亦，如下
大部分直接默認敲回車就好了杏节，除了第一個package name，它默認是webpack典阵，為了避免之后安裝出現(xiàn)問題拢锹，package name可隨便填個。
初始化完后的package.json如下：
3.在index.html文件中隨便寫個代碼萄喳，并引入打包后的js文件(這個文件不用創(chuàng)建)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Example</title>
</head>
<body>
<div id='container'>
</div>
//引入打包后的文件卒稳，一般都命名為bundle.js，不過也無所謂
<script src="bundle.js"></script>
</body>
</html>
再在app文件下創(chuàng)建hello.js他巨，寫個demo充坑，js需要按照commonJs模范來編寫
module.exports = function() {
var div = document.createElement('div');
div.textContent = "Hello World";
return div;
};
在main.js將hello.js引入
const div = require('./hello.js');//引入
document.querySelector("#container").appendChild(div());
4.在webpack.config.js配置入口及出口
module.exports = {
entry: __dirname + "/app/main.js",//入口文件
output: {
path: __dirname + "/index",//打包后的文件存放的地方
filename: "bundle.js"http://打包后輸出的文件
}
}
注：“__dirname”是node.js中的一個全局變量，它指向當前執(zhí)行腳本所在的目錄
實現(xiàn)打包通常通過命令行來實現(xiàn)染突，這里用最簡單的一個方法npm start來實現(xiàn)打包
在第1個步驟捻爷，已經(jīng)將package.json初始化，在里面加上sciprts對象份企，進行設置
"scripts": {
"start":"webpack"
},
此時的package.json里面有這些內(nèi)容
再敲命令行npm start也榄，webpack就開始工作了，并在index目錄下自動生成打包文件bundle.js
此時運行index.html司志，就會出現(xiàn)hello world.
5.將css打包(與上述的文件目錄無關)
先將寫好的css文件甜紫，從入口引入
//main.js
import(文件路徑)
打包css用到的webpack兩個工具處理樣式表，css-loader和style-loader骂远。
css-loader可以使用@import和url(...)的方法實現(xiàn)reuire()的功能囚霸，style-loader將所有計算后的樣式加入頁面。(如果項目里用到less等類似預處理器激才，涉及樣式計算)
首先要安裝兩個工具
npm install --save-dev style-loader css-loader
其次在webpack.config.js配置相關屬性
在webpack2及以上的版本拓型，字段為：
module:{rules:[{test: ,use..},{test: ,user:,...}]
由于我配置的版本是1.13.2所以字段為:
module:{loadesr:[test: ,loader:]}额嘿。
起初不知道每個版本的字段配置不一樣，用的rules劣挫，結果命令出現(xiàn)錯誤册养。
配置好了之后，用npm start運行压固，結果報錯
報的語法錯誤捕儒，需要一個額外的loader來處理這樣的文件格式。我在css有部分background使用了url屬性邓夕，此時需要另外一個工具url-loader來支撐刘莹，同樣，在webpack.config.js配置字段焚刚，下圖為完整字段
然后再運行npm start点弯，問題完美解決.
引申：webpack打包require.js
項目的目錄結構
說明：script文件夾除了jquery.min.js，剩下的都是以amd格式定義的模塊矿咕，main.js是入口文件抢肛，也是require.js的核心文件；lib用來放打包后的文件碳柱；頁面為登錄頁面捡絮；
在沒有打包的時候，項目中index頁面莲镣，引入的是require.js福稳，打包就不用引入require.js了，按照webpack的方式引入打包后的文件
<script type="text/javascript" src="js/script/jquery.min.js"></script>
<script type="text/javascript" src='js/lib/index.js'></script>
這里我們看到瑞侮，除了配置打包后的文件的圆，還引入了jquery
因為我們編寫的模塊需要依賴jquery，所以將需要將jquery配制成全局的半火。
全局配置需要在webpack.config.js進行
module.exports = {
entry: {
index: './js/script/main.js'
},
output: {
path: './js/lib/',
filename: '[name].js',
publicPath: './js/lib/'
},
externals:{
jquery:"jQuery" //全局配置jquery
},
module: {
loaders: [
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test:/\.(jpg|png|jpeg|gif)$/,
loader:'url-loader?limit=8192'
}
]
}
};
再在main.js引入
const $ = require("jquery");
那些自定義的模塊像addClass.js越妈，如果依賴jquery，只需在定義的時候?qū)query引入钮糖，否則會報錯梅掠。單純使用require.js的時候不需要引入，這是區(qū)別店归。
再來看main.js阎抒，使用require.js的時候，我們引用自定義的模塊是這樣引用的
require(['mtWindow'],function(mtWindow){
mtWindow.add("手機號格式錯誤");
})
require.js會幫我們處理好文件路徑娱节，所以只寫文件名即可挠蛉，不用寫完整的路徑
而用webpack祭示，需要將路徑填寫完整肄满，否則會報錯(也可能有指定根目錄的方法谴古，我不知道)
require(['./mtwindow.js'],function(mtWindow){
mtWindow.mtWindow("手機號格式錯誤");
})
以上是我webpack的入門，像babel稠歉，loaders掰担，plugins都沒有寫，因為我也沒有細細學習這部分怒炸。后續(xù)學習带饱，會把這部分補上。
