資訊專欄INFORMATION COLUMN
摘要：關(guān)于模板的有好幾種。一次安裝所有的大家可以了解一些的用法把編譯成。安裝參考文檔功能將源文件遷移到指定的目錄，返回新的文件路徑。安裝用法它會(huì)將所有的入口中引用的移動(dòng)到和頁面對(duì)應(yīng)的獨(dú)立分離的文件。
webpack是需要自己編寫自己需要的一個(gè)配置對(duì)象，取決你如何使用webpack,下面指定了所有的可用的配置選項(xiàng)。
參考文檔：https://doc.webpack-china.org...
webapck.config.js
var path = require("path"); #使用Node內(nèi)置的path模塊，并在它前面加上__dirname這個(gè)全局變量。可以防止
不同操作系統(tǒng)之間的文件路徑問題，并且可以使用相對(duì)路徑按照預(yù)期工作。
var webpackConfig = {
devtool:"inline-source-map", //開發(fā)錯(cuò)誤提示，嵌入到源文件
entry:{ }, //string | object | array ;這里應(yīng)用程序開始執(zhí)行；webpack開始打包
output:{ }, //webpack 如何輸出結(jié)果的相關(guān)選項(xiàng)
devServer:{ }, //開發(fā)服務(wù)器配置，
module:{ //關(guān)于模塊配置
rules:[] //模塊規(guī)則（配置loader、解析器等選項(xiàng)）
},
plugins:plugins, //附加插件列表
}
module.exports = webpackConfig;
1、entry參數(shù)：入口文件配置
entry: //string | array | object。入口文件是應(yīng)用程序的起點(diǎn)入口，從這里應(yīng)用程序啟動(dòng)執(zhí)行。如果傳遞的是一個(gè)數(shù)組，
那么數(shù)組的每一項(xiàng)都會(huì)執(zhí)行。
規(guī)則：每個(gè)HTML頁面都有一個(gè)入口起點(diǎn)。單頁應(yīng)用（SPA）：一個(gè)入口起點(diǎn)；多頁應(yīng)用（MPA）：多個(gè)入口起點(diǎn)。
命名：如果傳入一個(gè)字符串或字符串?dāng)?shù)組，chunk會(huì)被命名為main。如果傳入一個(gè)對(duì)象，則每一個(gè)鍵（key）是chunk的名稱，
該值描述了chunk的入口起點(diǎn)。
在我的配置中，由于是對(duì)多頁面的處理，所以采用entry:object;每一個(gè)鍵（key）是chunk的名稱，同時(shí)又是chunk的入口起點(diǎn)。
webpack.config.js
//glob在webpack中對(duì)文件的路徑處理
var glob = require("glob");
const HtmlWebpackPlugin = require("html-webpack-plugin")
var webpackConfig = {
/*webpack基礎(chǔ)配置*/
};
//封裝方法，獲取指定路徑下的入口文件
//返回的結(jié)構(gòu) [ "src/pages/contact/contact/index.js",
// "src/pages/index/index/index.js",
// "src/pages/join/join/index.js",
// "src/pages/pagea/index/index.js" ]
function getEntries(globPath){
//方法： glob.sync(pattern,[options])；該方法成功后，返回匹配搜索之后的數(shù)組，
//沒有匹配返回一個(gè)空數(shù)組;pattern:"src/pages/**/index.js";這里‘**’匹配模式表示的是
位于src/pages/和/index.js的這兩層文件名
var files = glob.sync(globPath),
entries = {};
files.forEach(function(filepath){
//取倒數(shù)第二層（pages下面的文件夾）做包名
var split = filepath.split("/");
var name = split[split.length - 2];
entries[name] = "./" + filepath;
});
return entries;
};
//
var entries = getEntries("src/pages/**/index.js");
Object.keys(entries).forEach(function(name){
//這里循環(huán)輸出每一個(gè)頁面的entry,
webpackConfig.entry[name] = entries[name];
//判斷是否是登陸頁面;因?yàn)榈顷戫撁婧推渌撁媸莾蓚€(gè)不同的模板
//HtmlWebpackPlugin插件的詳細(xì)用法參考：https://segmentfault.com/a/1190000007294861
if(name == "login/login"){
var plugin = new HtmlWebpackPlugin({
//有模板生成的html文件名
filename:"login.html",
//登陸頁面的html模板
template:"./src/login.html",
inject:"body",
chunks:["commons",name]
});
}else{
var plugin = new HtmlWebpackPlugin({
//有模板生成出來的html文件名
filename:name + ".html",
//除登陸頁面外，多個(gè)頁面使用同一個(gè)模板
template:"./src/index.tmpl.html",
inject:"body",
chunks:["commons",name]
})
}
})
2、output參數(shù)：輸出文件配置
output包括一組選項(xiàng)，指示webpack如何去輸出、以及在哪里輸出你的(bundle、asset和其他你所打包或使用webpack載入的任何內(nèi)容)。
常用的參數(shù)path、publicPath、filename、chunkFilename.
在我的webpack.config.js的配置中：
webpack.config.js:
var webpackConfig = {
devtool:"inline-source-map",
entry:{ },
output:{
path:__dirname + "build",
filename: "js/[name].bundle-[chunkhash:8].js"
},
devServer:{ },
module:{
rules:rules
},
plugins:plugins
}
output.path:string;output目錄對(duì)應(yīng)一個(gè)絕對(duì)路徑 #path:path.resolve(__dirname,"bulid")
output.filename:string;此選項(xiàng)決定了每一個(gè)輸出bundle的名稱。這些bundle將寫入到output.path選項(xiàng)指定的目錄下。
兩種情況：
1、對(duì)于單入口起點(diǎn)，filename會(huì)是一個(gè)靜態(tài)名稱。filename:"bundle.js"。
2、對(duì)于多入口起點(diǎn)、代碼拆分或各種插件創(chuàng)建多個(gè)bundle，應(yīng)該使用以下四種方式：
(a)使用入口名稱： filename:"[name].bundle.js"; (b)使用內(nèi)部chunk id : filename:"[id].bundle.js"; (c)使用每次構(gòu)建過程中，唯一的hash生成：filename:"[name].[hash].bundle.js"; (d)使用基于每個(gè)chunk內(nèi)容的hash: filename:"[chunkhash].bundle.js";
這里涉及到緩存的知識(shí)：參考文檔：https://doc.webpack-china.org...
可以通過命中緩存的技術(shù)，以降低網(wǎng)絡(luò)流量，使網(wǎng)站加載速度更快，如果我們?cè)诓渴鹦掳姹緯r(shí)不更改資源的文件名，瀏覽器就可能認(rèn)為它沒有更新，就會(huì)使用它的緩存版本，通過必要的配置，以確保webpack編譯生成的文件能夠被客戶端緩存，而在文件內(nèi)容變化后，能夠請(qǐng)求到新的文件。
輸出文件的文件名(output.filename):
通過使用output.filename的不同的方式，可以確保瀏覽器獲取修改后的文件。文檔中建議使用[chunkhash]替換，在文件名中包含一個(gè)chunk相關(guān)的哈希。
Loaders的常用的加載器，參考文檔：https://doc.webpack-china.org...
安裝相對(duì)應(yīng)的loader：
npm install --save-dev css-loader;作用是指示webpack對(duì)每個(gè).css使用css-loader
使用Loader的方法:
在應(yīng)用程序中，有三種使用loader的方式：
1、配置（推薦）：在webpaack.config.js文件中指定loader。
2、內(nèi)聯(lián)：在每個(gè)import 語句中顯示指定loader。
3、CLI: 在shell命令中指定它們。
配置[Configuration]：
module.rules允許你在webpack配置中指定多個(gè)loader。這是展示loader的一種簡(jiǎn)明方式，有助于使代碼變得簡(jiǎn)潔。
這是我經(jīng)常用的書寫方式。
module:{
rules:[
{
test:/.css$/,
use:[
{ loader: "style-loader" },
{
loader:"css-loader",
options{
modules:true
}
}
]
}
]
}
下面介紹一些常用的loader的用法：
1、html-loaderhtml-loader 導(dǎo)出HTML為字符串，需要引用靜態(tài)資源。
關(guān)于模板(templating)的有好幾種：html-loader、pug-loader、jade-loader、markdown-loader、posthtml-loader、react-markdown-loader、handlebars-loader、markup-inline-loader。
只介紹html-loader的使用：
參考文檔：https://doc.webpack-china.org/loaders/html-loader
安裝：
npm install --save-dev html-loader
用法：
默認(rèn)情況下，每個(gè)本地的
都需要require(require(./image.png))來進(jìn)行加載。
不過這需要file-loader或url-loader(這個(gè)后面有介紹)。
示例：
module:{
rules:[{
test:/.html$/, #匹配以‘.html’結(jié)尾的模塊；
loader:"html-loader", #html-loader加載器
options:{ #可選項(xiàng)(一般用于上線的webpack.build.config中)
minimize: true, #Boolean: 是否壓縮html
removeComments: true, #Boolean: 是否刪除注釋
collapseWhitespace: true， #Boolean: 是否刪除空格
}
}]
}
2、babel-loader
babel-loader 加載es2015代碼，并且將代碼轉(zhuǎn)譯為ES5
參考文檔：https://doc.webpack-china.org...
安裝：
npm install --save-dev babel-loader babel-core babel-preset-env
用法：
在webpack配置對(duì)象中，需要添加babel-loader到module的loader列表中，像下面這樣：
module:{
rules:[
{
test:/.js$/, #匹配以‘.js’結(jié)尾的文件
loader:"babel-loader", #babel-loader加載器
include:path.resolve(__dirname,"src"), #只包括src
exclude:path.resolve(__dirname,"node_modules"), #排除node_module
query:{
presets:["preset-env"]
}
}
]
}
babel-loader編譯很慢的，為了確保轉(zhuǎn)譯盡可能少的文件，可能使用/.js$/來匹配，排除node_modules,配置exclude選項(xiàng)，
提高編譯速度。
3、less/css-loader
less/css-loader是對(duì)css的處理，下面分別介紹處理css時(shí)，用到的css-loader、less-loader、style-loader、postcss-loader。這幾種loader配合使用。
一次安裝所有的loader：
npm install --save-dev autoprefixer css-loader less-loader style-loader postcss-loader
less-loader:
大家可以了解一些less的用法：http://less.bootcss.com/
less-loader: 把less編譯成css。使用css-loader或者raw-loader把它變成一個(gè)JS模塊，
并使用ExtractTextPlugin把它解壓到一個(gè)多帶帶的文件中,
這樣你的樣式不依賴于JavaScript。另外，less-loader并不會(huì)針對(duì)url()語法做特別的轉(zhuǎn)換，
如果想把url()語句里涉及的文件(比如圖片、字體文件)也一并用webpack打包的話，就必須利用css-loader進(jìn)一步處理。
參考文檔：https://doc.webpack-china.org/loaders/less-loader/
用法：
將css-loader、style-loader、less-loader鏈?zhǔn)秸{(diào)用，使用ExtractTextPlugin把它解壓到多帶帶的文件
webpack.config.js:
const ExtractTextPlugin = require("extract-text-webpack-plugin");
plugin = [...
new ExtractTextPlugin("css/[name]-[chunkhash:8].css",{allChunks:false}), //css分離和壓縮
...
];
module:{
rules:[
{
text:/.less$/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:[
{
loader:"css-loader",
options:{
minimize:false; #是否對(duì)css進(jìn)行壓縮
}
},
{
loader:"postcss-loader", #自動(dòng)添加瀏覽器前綴
},
{
loader:"less-loader"
}
]
})
}
]
}
css-loader:
用法：
css-loader解釋@import 和 url(),在import/require()后再解析它們。
選項(xiàng)：
參考文檔：https://doc.webpack-china.org/loaders/css-loader/
常用的就是是否對(duì)css進(jìn)行代碼壓縮(Minification)：minimize:Boolean;還有就是對(duì)url()語句的處理。
在less/css里url()語句，一般使用相對(duì)路徑的方式來指定文件路徑；請(qǐng)不要使用‘/’開頭
(即相對(duì)于網(wǎng)站的根目錄，因?yàn)閷?duì)于文件系統(tǒng)來說，這令人混淆)。
style-loader:
用法： 通過注入