什么是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 +入口文件名+輸出文件名,即可完成打包