webpack是什么？為什么要使用函喉？
隨著時代的發(fā)展避归，web應(yīng)用有越來越豐富的應(yīng)用和功能，而我們開發(fā)web應(yīng)用所使用到的js代碼和依賴包也越來越多管呵，架構(gòu)也越來越復(fù)雜梳毙，比如模塊化，TypeScript捐下，scss等css預(yù)處理器等等账锹，用到了這些東西往往需要進行額外的處理才能被瀏覽器識別，為了解決這些問題坷襟，webpack工具類就孕育而生奸柬。
webpack是模塊打包工具，它能分析你的項目結(jié)構(gòu)啤握，找到j(luò)s模塊及他們的依賴鸟缕，同時還能使用各種loader來解析各種瀏覽器不能識別的代碼，還能通過插件處理我們的代碼排抬，然后把我們的項目打包成幾個文件懂从。
使用webpack
- webpack可以使用npm安裝
npm install webpack -D（-S）
-D是指安裝到開發(fā)依賴，-S是指安裝到生產(chǎn)依賴蹲蒲。
- 配置webpack.js文件
通常我們的項目下如果要使用webpack則需要配置一個webpack.js文件
module.exports = {
entry: __dirname + '/app/main.js',
output: {
path: __dirname + '/dist',
filename: 'build.js'
}
}
entry 和 output 這兩個選項分別定義webpack的入口文件和打包出口文件番甩。
devtool: 'eval-source-map'
devtool這個選項主要配置source maps，它能在我們打包時同時生成source maps文件届搁，在開發(fā)是往往需要各種調(diào)試缘薛，而打包后的文件非常不容易找出錯誤代碼窍育，而這些文件就是幫助我們快速定位源文件的錯誤代碼，讓我們能輕松的找出錯誤代碼并及時更改宴胧。
devServer: {
contentBase: './publice',//本地服務(wù)加載的頁面漱抓，
historyApiFallback: true,//不跳轉(zhuǎn)
inline: true//實時更新
}
devServer 能過幫助我們構(gòu)建本地服務(wù)器，當(dāng)然在此之前需要安裝webpack-dev-server恕齐。
module: {
rules: [
{
test: /(\.jsx|\.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: /node_modules/
}
]
}
module這個選項就是配置各種各樣的加載器的乞娄，像babel的loader，css的loader显歧，vue的loader,less的loader等等仪或，配置好了這些loader就是我們能用這些東西做開發(fā)。
plugins: [
new webpack.BannerPlugin('版權(quán)所有士骤，翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html"
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin(),
new ExtractTextPlugin("style.css")
],
這個選項能配置個種webpack插件范删，包括代碼壓縮，css提取拷肌，html壓縮到旦，js壓縮等等，webpack有許多內(nèi)置插件和第三方插件廓块，提供許多功能讓我們能更好的開發(fā)項目厢绝。
總結(jié)
webpack的知識光是這些還是遠遠不夠的，還需要到官網(wǎng)去學(xué)習(xí)以及在項目中學(xué)習(xí)使用带猴。
