什么是Webpack寒瓦，以及它的工作方式被冒？
webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的模塊打包器(module bundler)适室。當 webpack 處理應(yīng)用程序時货邓，它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph)公浪，其中包含應(yīng)用程序需要的每個模塊他宛，然后將所有這些模塊打包成一個或多個 bundle。
Webpack的優(yōu)點欠气？
- JavaScript厅各、CSS代碼的合并和壓縮
- CSS預(yù)處理：Less、Sass预柒、Stylus的編譯
- 生成雪碧圖（CSS Sprite）
- ES6 轉(zhuǎn)成瀏覽器大多都支持的ES5
- 模塊化加載
理解四個核心概念：
- 入口(entry)
- 輸出(output)
- 加載器(loader)
- 插件(plugins)
入口
入口起點(entry point)指示 webpack 應(yīng)該使用哪個模塊队塘，來作為構(gòu)建其內(nèi)部依賴圖的開始袁梗。進入入口起點后，webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的憔古，在webpack.config.js中配置：
module.exports = { entry: './path/to/my/entry/file.js' };
輸出
output 屬性告訴 webpack 在哪里輸出它所創(chuàng)建的 bundles遮怜，以及如何命名這些文件。你可以通過webpack.config.js在配置中指定一個 output 字段鸿市，來配置這些處理過程：
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'
}
};
我們通過 output.filename 和 output.path 屬性锯梁，來告訴 webpack bundle 的名稱，以及我們想要生成到哪里
loader
讓 webpack 能夠去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）焰情。loader 可以將所有類型的文件轉(zhuǎn)換為 webpack 能夠處理的有效模塊涝桅，然后你就可以利用 webpack 的打包能力，對它們進行處理烙样。
本質(zhì)上，webpack loader 將所有類型的文件蕊肥，轉(zhuǎn)換為應(yīng)用程序的依賴圖可以直接引用的模塊谒获。
在更高層面，在 webpack 的配置中 loader 有兩個目標壁却。
- 識別出應(yīng)該被對應(yīng)的 loader 進行轉(zhuǎn)換的那些文件批狱。(使用 test 屬性)
- 轉(zhuǎn)換這些文件，從而使其能夠被添加到依賴圖中（并且最終添加到 bundle 中）(use 屬性)
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'
}
]
}
};
插件
loader 被用于轉(zhuǎn)換某些類型的模塊展东，而插件則可以用于執(zhí)行范圍更廣的任務(wù)赔硫。插件的范圍包括，從打包優(yōu)化和壓縮盐肃，一直到重新定義環(huán)境中的變量爪膊。插件接口功能極其強大，可以用來處理各種各樣的任務(wù)砸王。
想要使用一個插件推盛，你只需要 require() 它，然后把它添加到 plugins 數(shù)組中谦铃。多數(shù)插件可以通過選項(option)自定義耘成。你也可以在一個配置文件中因為不同目的而多次使用同一個插件，這時需要通過使用 new 操作符來創(chuàng)建它的一個實例驹闰。
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝
const webpack = require('webpack'); // 用于訪問內(nèi)置插件
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;
webpack打包步驟
- 以管理員的身份運行cmd，并進入項目目錄
- 運行npm install webpack --global，安裝全局webpack
- 運行npm init奸腺，初始化項目生成package.json
- 運行npm install webpack --save-dev诲侮，安裝本地webpack作為依賴
- 運行webpack +入口文件名+輸出文件名，即可完成打包
