概念
webpack是現(xiàn)在JavaScript應(yīng)用程序打包生成器。當(dāng)webpack在處理程序的時(shí)候庆揩，會(huì)遞歸的構(gòu)建依賴關(guān)系圖贸人，其中包括應(yīng)用程序所需要的每個(gè)模塊，然后將這些模塊打包成bundle由瀏覽器加載鲸阔，通常只有一個(gè)偷霉。
首先我們先理解四個(gè)概念：
-
入口（ Entry）
webpack創(chuàng)建程序的依賴關(guān)系圖，那么是需要一個(gè)入口文件褐筛。入口文件告訴webpack是從哪里開始創(chuàng)建依賴關(guān)系圖类少，然后根據(jù)依賴關(guān)系圖進(jìn)行打包所需要的文件。
在webpack中我們通過(guò)webpack 配置對(duì)象(webpack configuration object) 中的entry屬性進(jìn)行設(shè)置入口文件渔扎。如下例子：
//webpack.config.js
module.exports= {
entry: './main.js'
}
-
出口（Output）
當(dāng)所有的資源（assets）一起后硫狞，還需要在哪里告訴webpack打包應(yīng)用程序，webpack的output屬性告訴了我們?cè)谀睦锾幚須w攏在一起的代碼晃痴。
//webpack.config.js
const path = require('path');
module.exports = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
}
};
如上残吩，我們通過(guò)output.filename和output.path告訴了bundle的名稱和以及要生成到哪里。
-
Loader
在webpack中可以將項(xiàng)目中任何的資源作為模塊來(lái)進(jìn)行對(duì)待倘核，然后webpack自身只理解JavaScript泣侮。loader是在文件被添加到依賴圖中時(shí)，其轉(zhuǎn)換為模塊笤虫。
在較高層面中webpack中配置loader有兩個(gè)目標(biāo)：- 識(shí)別應(yīng)該被對(duì)應(yīng)loader進(jìn)行轉(zhuǎn)換的那些文件（test屬性）
- 轉(zhuǎn)換這些文件旁瘫，從而使其能夠被添加到依賴圖中，并且最終添加到bundle中琼蚯。（use屬性）
//webpack.config.js
const path = require('path');
const config = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
module.exports = config;
以上配置中酬凳，對(duì)一個(gè)單獨(dú)的 module 對(duì)象定義了 rules 屬性，里面包含兩個(gè)必須屬性：test 和 use遭庶。這告訴 webpack 編譯器(compiler) 如下信息：
“嘿宁仔，webpack 編譯器，當(dāng)你碰到「在 require()/import 語(yǔ)句中被解析為 '.txt' 的路徑」時(shí)峦睡，在你對(duì)它打包之前翎苫，先使用 raw-loader 轉(zhuǎn)換一下权埠。”
-
插件(Plugins)
loader僅在每個(gè)文件的基礎(chǔ)上進(jìn)行轉(zhuǎn)換煎谍，而插件更常用于在打包模塊的“ compilation”和“ chunk”生命周期執(zhí)行操作和自定義功能攘蔽。
如果想要使用插件，必須先通過(guò)require()該插件呐粘，然后將其添加進(jìn)入plugins數(shù)組中满俗，我們也可以因?yàn)椴煌哪康亩啻问褂猛粋€(gè)插件，這時(shí)需要通過(guò)new創(chuàng)建一個(gè)它的實(shí)例作岖。
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');
const config = {
entry: './path/to/my/entry/file.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
},
plugins: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
