webpack 的配置文件就是 Node 的一個模塊，它導出的將是一個對象

module.exports = {entry: './entry',output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js'} }

如果直接使用 webpack 來執行編譯，webpack 默認讀取的是當前目錄下的 webpack.config.js 文件

如果你有其他命名的配置文件，可以使用 –config 參數傳入路徑

webpack --config ./webpackConfig/dev.config.js

配置入口：entry

入口可以是單入口（字符串），也可以是多入口（數組/對象），為了方便后續維護，最好寫成對象

module.exports = {// pagesDir 是前面準備好的入口文件集合目錄的路徑entry: {'alert/index': path.resolve(pagesDir, `./alert/index/page`), 'index/login': path.resolve(pagesDir, `./index/login/page`), 'index/index': path.resolve(pagesDir, `./index/index/page`), } }

entry?屬性的?name?對應具體的目錄

├─src # 當前項目的源碼├─pages # 各個頁面獨有的部分，如入口文件、只有該頁面使用到的css、模板文件等│ ├─alert # 業務模塊│ │ └─index # 具體頁面│ ├─index # 業務模塊 │ │ ├─index # 具體頁面 │ │ └─login # 具體頁面

輸出文件：output

output 參數與 entry 不同：output 參數告訴 webpack 以什么樣的方式來?生成/輸出?文件。output 參數相當于一套規則，所有的入口都必須使用這一套規則。

module.exports = {output: {path: path.resolve(__dirname, 'build'),filename: '[name]/entry.js',publicPath: 'build',chunkFilename: '[id].bundle.js'} }

path

path?參數表示生成文件的根目錄，需要傳入一個絕對路徑，?path?參數和后面的?filename?參數共同組成了輸出文件的路徑

filename

filename?屬性表示的是如何命名生成出來的入口文件，規則有以下三種：

• [name]?：入口文件的?name
• [hash]?：本次編譯的一個?hash?版本，只要在同一次編譯過程中生成的文件，這個?hash?的值就是一樣的
• [chunkhash]?：?chunk?的一個?hash?版本，在同一次編譯中，每一個?chunk?的?hash?都是不一樣的，在兩次編譯中，如果某個?chunk?根本沒發生變化，那么該?chunk?的?hash?就不會發生變化

publicPath

publicPath?參數表示的是一個 URL 路徑，用于生成?css/js/image/fonts?等資源的路徑，以確保網頁能正確地加載到這些資源。

chunkFilename

chunkFilename?與?filename?參數類似，都是用來定義文件的命名方式，只不過chunkFilename?參數指定的是除入口文件外的?chunk?的命名。

Loader配置：module

webpack 的核心實際上只能對 js 進行打包，webpack 可以通過 loader 將那些不是 js 的文件轉換成 js，再進行打包。

module.exports = {loaders: [{test: /\.jsx$/,include: [path.resolve(__dirname, 'app/src'),path.resolve(__dirname, 'app/test') ], exclude: [ path.resolve(__dirname, 'node_modules') ], loader: 'babel-loader' } ] }

轉載于:https://www.cnblogs.com/lpc-js/p/6655656.html

總結

以上是生活随笔為你收集整理的webpack的一些常用配置 （转）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。