溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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'
}
當我們在entry中定義構建多個文件時，filename可以對應的更改為[name].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'}
]
}
此外，還可以添加用來定義png、jpg這樣的圖片資源在小于10k時自動處理為base64圖片的加載器：
{ test: /\.(png|jpg)$/,loader: 'url-loader?limit=10000'}
給css和less還有圖片添加了loader之后，我們不僅可以像在node中那樣require js文件了，我們還可以require css、less甚至圖片文件：
require('./bootstrap.css');
require('./myapp.less');
var img = document.createElement('img');
img.src = require('./glyph.png');
但是需要知道的是，這樣require來的文件會內聯到 js bundle中。如果我們需要把保留require的寫法又想把css文件單獨拿出來，可以使用下面提到的[extract-text-webpack-plugin]插件。
在上面示例代碼中配置的第一個loaders我們可以看到一個叫做react-hot的加載器。我的項目是用來學習react寫相關代碼的，所以配置了一個react-hot加載器，通過它，可以實現對react組件的熱替換。我們已經在entry參數中配置了webpack/hot/only-dev-server,所以我們只要在啟動webpack開發服務器時開啟–hot參數，就可以使用react-hot-loader了。在package.json文件中這樣定義：
"scripts": {
"start": "webpack-dev-server --hot --progress --colors",
"build": "webpack --progress --colors"
}
4.resolve
webpack在構建包的時候會按目錄的進行文件的查找，resolve屬性中的extensions數組中用于配置程序可以自行補全哪些文件后綴：
resolve:{
extensions:['','.js','.json']
}
然后我們想要加載一個js文件時，只要require(‘common')就可以加載common.js文件了。
6.externals
當我們想在項目中require一些其他的類庫或者API，而又不想讓這些類庫的源碼被構建到運行時文件中，這在實際開發中很有必要。此時我們就可以通過配置externals參數來解決這個問題：
externals: {
"jquery": "jQuery"
}
這樣我們就可以放心的在項目中使用這些API了：var jQuery = require(“jquery”);
7.context
當我們在require一個模塊的時候，如果在require中包含變量，像這樣：
require("./mods/" + name + ".js");
那么在編譯的時候我們是不能知道具體的模塊的。但這個時候，webpack也會為我們做些分析工作：
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);
以上這篇基于webpack.config.js 參數詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
