Webpack用于前端,**它把你的項目當做一個整體,通過一個給定的主文件(如:index.js),Webpack將從這個文件開始找到你的項目的所有依賴文件,使用loaders處理它們,最后打包為一個瀏覽器可識別的JavaScript文件。**編寫前端可以更加模塊化。
~~~
const path = require('path');
module.exports = {
mode: "production", // "production" | "development" | "none" // Chosen mode tells webpack to use its built-in optimizations accordingly.
entry: "./app/entry", // string | object | array entry: ["./app/entry1", "./app/entry2"],
entry: {
a: "./app/entry-a",
b: ["./app/entry-b1", "./app/entry-b2"]
},
// 默認為 './src'
// 這里應用程序開始執行
// webpack 開始打包
output: {
// webpack 如何輸出結果的相關選項
path: path.resolve(__dirname, "dist"), // string
// 所有輸出文件的目標路徑
// 必須是絕對路徑(使用 Node.js 的 path 模塊)
filename: "bundle.js", // string // 「入口分塊(entry chunk)」的文件名模板
publicPath: "/assets/", // string // 輸出解析文件的目錄,url 相對于 HTML 頁面
library: "MyLibrary", // string,
// 導出庫(exported library)的名稱
libraryTarget: "umd", // 通用模塊定義 // 導出庫(exported library)的類型
/* 高級輸出配置(點擊顯示) */ },
module: {
// 關于模塊配置
rules: [
// 模塊規則(配置 loader、解析器等選項)
{
test: /\.jsx?$/,
include: [
path.resolve(__dirname, "app")
],
exclude: [
path.resolve(__dirname, "app/demo-files")
],
// 這里是匹配條件,每個選項都接收一個正則表達式或字符串
// test 和 include 具有相同的作用,都是必須匹配選項
// exclude 是必不匹配選項(優先于 test 和 include)
// 最佳實踐:
// - 只在 test 和 文件名匹配 中使用正則表達式
// - 在 include 和 exclude 中使用絕對路徑數組
// - 盡量避免 exclude,更傾向于使用 include
issuer: { test, include, exclude },
// issuer 條件(導入源)
enforce: "pre",
enforce: "post",
// 標識應用這些規則,即使規則覆蓋(高級選項)
loader: "babel-loader",
// 應該應用的 loader,它相對上下文解析
// 為了更清晰,`-loader` 后綴在 webpack 2 中不再是可選的
// 查看 webpack 1 升級指南。
options: {
presets: ["es2015"]
},
// loader 的可選項
},
{
test: /\.html$/,
use: [
// 應用多個 loader 和選項
"htmllint-loader",
{
loader: "html-loader",
options: {
/* ... */
}
}
]
},
{ oneOf: [ /* rules */ ] },
// 只使用這些嵌套規則之一
{ rules: [ /* rules */ ] },
// 使用所有這些嵌套規則(合并可用條件)
{ resource: { and: [ /* 條件 */ ] } },
// 僅當所有條件都匹配時才匹配
{ resource: { or: [ /* 條件 */ ] } },
{ resource: [ /* 條件 */ ] },
// 任意條件匹配時匹配(默認為數組)
{ resource: { not: /* 條件 */ } }
// 條件不匹配時匹配
],
/* 高級模塊配置(點擊展示) */ },
resolve: {
// 解析模塊請求的選項
// (不適用于對 loader 解析)
modules: [
"node_modules",
path.resolve(__dirname, "app")
],
// 用于查找模塊的目錄
extensions: [".js", ".json", ".jsx", ".css"],
// 使用的擴展名
alias: {
// 模塊別名列表
"module": "new-module",
// 起別名:"module" -> "new-module" 和 "module/path/file" -> "new-module/path/file"
"only-module$": "new-module",
// 起別名 "only-module" -> "new-module",但不匹配 "only-module/path/file" -> "new-module/path/file"
"module": path.resolve(__dirname, "app/third/module.js"),
// 起別名 "module" -> "./app/third/module.js" 和 "module/file" 會導致錯誤
// 模塊別名相對于當前上下文導入
},
/* 可供選擇的別名語法(點擊展示) */ /* 高級解析選項(點擊展示) */ },
performance: {
hints: "warning", // 枚舉 maxAssetSize: 200000, // 整數類型(以字節為單位)
maxEntrypointSize: 400000, // 整數類型(以字節為單位)
assetFilter: function(assetFilename) {
// 提供資源文件名的斷言函數
return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
}
},
devtool: "source-map", // enum // 通過在瀏覽器調試工具(browser devtools)中添加元信息(meta info)增強調試
// 犧牲了構建速度的 `source-map' 是最詳細的。
context: __dirname, // string(絕對路徑!)
// webpack 的主目錄
// entry 和 module.rules.loader 選項
// 相對于此目錄解析
target: "web", // 枚舉 // bundle 應該運行的環境
// 更改 塊加載行為(chunk loading behavior) 和 可用模塊(available module)
externals: ["react", /^@angular\//], // 不要遵循/打包這些模塊,而是在運行時從環境中請求他們
serve: { //object
port: 1337,
content: './dist',
// ...
},
// 為 webpack-serve 提供選項
stats: "errors-only", // 精確控制要顯示的 bundle 信息
devServer: {
proxy: { // proxy URLs to backend development server
'/api': 'http://localhost:3000'
},
contentBase: path.join(__dirname, 'public'), // boolean | string | array, static file location
compress: true, // enable gzip compression
historyApiFallback: true, // true for index.html upon 404, object for multiple paths
hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
https: false, // true for self-signed, object for cert authority
noInfo: true, // only errors & warns on hot reload
// ...
},
plugins: [
// ...
],
// 附加插件列表
/* 高級配置(點擊展示) */}
~~~
以上是一個webpack的配置文件`webpack.config.js`,它是一個js文件。
[https://webpack.docschina.org/configuration/#%E9%80%89%E9%A1%B9](https://webpack.docschina.org/configuration/#%E9%80%89%E9%A1%B9)
[http://web.jobbole.com/92555/](http://web.jobbole.com/92555/)
實際上有很多腳手架工具 (scaffolding) 去做這樣的事。