下面我就為大家分享一篇基於webpack.config.js 參數詳解，具有很好的參考價值，希望對大家有幫助。
webpack.config.js檔案通常放在專案的根目錄中，它本身也是一個標準的Commonjs規格的模組。
var webpack = require('webpack');
module.exports = {
entry: [
'webpack/hot/only-dev-server',
'./js/app.js'
],
output: {
path: './build',
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{ test: /\.css$/, loader: "style!css" },
{test: /\.less/,loader: 'style-loader!css-loader!less-loader'}
]
},
resolve:{
extensions:['','.js','.json']
},
plugins: [
new webpack.NoErrorsPlugin()
]
};1.entry
entry可以是字串或陣列或是物件。
當entry是個字串的時候，用來定義入口文件：
entry: './js/main.js'
當entry是個陣列的時候，裡面同樣包含入口js文件，另外一個參數可以是用來設定webpack提供的一個靜態資源伺服器，webpack-dev-server。 webpack-dev-server會監控專案中每個檔案的變化，即時的進行構建，並且自動刷新頁面：
entry: [ 'webpack/hot/only-dev-server', './js/app.js'
當entry是個物件的時候，我們可以將不同的檔案建構成不同的文件，按需使用，例如在我的hello頁面中只要\引入hello.js即可：
entry: {
hello: './js/hello.js',
form: './js/form.js'
}2.output
##output參數是個對象，用來定義建置後的檔案的輸出。其中包含path和filename：
output: {
path: './build',
filename: 'bundle.js'
}3.module
關於模組的載入相關，我們就定義在module.loaders中。這裡透過正規表示式去匹配不同後綴的檔名，然後給它們定義不同的載入器。例如給less檔案定義串連的三個載入器（！用來定義級聯關係）：module: {
loaders: [
{ test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
{ test: /\.css$/, loader: "style!css" },
{ test: /\.less/, loader: 'style-loader!css-loader!less-loader'}
]
}{ test: /\.(png|jpg)$/,loader: 'url-loader?limit=10000'}require('./bootstrap.css'); require('./myapp.less'); var img = document.createElement('img'); img.src = require('./glyph.png');
"scripts": {
"start": "webpack-dev-server --hot --progress --colors",
"build": "webpack --progress --colors"
}4.resolve
webpack在建置套件的時候會按目錄的進行檔案的查找，resolve屬性中的extensions數組中用於配置程式可以自行補全哪些檔案後綴：
resolve:{
extensions:['','.js','.json']
}6.externals
當我們想在專案中require一些其他的類別庫或API，而又不想讓這些類別庫的原始碼被建置到運行時檔案中，這在實際開發中很有必要。此時我們就可以透過設定externals參數來解決這個問題：
externals: {
"jquery": "jQuery"
}#7.context
當我們在require一個模組的時候，如果在require中包含變量，像這樣：require("./mods/" + name + ".js");1.分析目錄：'./mods'；
2.提取正規表示式：'/^.*.js$/';
於是這個時候為了更好地配合wenpack進行編譯，我們可以給它指明路徑，像在cake-webpack-config中所做的那樣（我們在這裡先忽略abcoption的作用）：var currentBase = process.cwd(); var context = abcOptions.options.context ? abcOptions.options.context : path.isAbsolute(entryDir) ? entryDir : path.join(currentBase, entryDir);
ajax springmvc實作C與View之間的資料交流方法
以上是基於webpack.config.js 參數詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
