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) 去做這樣的事。