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'
 }

 

當咱們在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);