webpack.config.js文件通常放在項(xiàng)目的根目錄中，它本身也是一個(gè)標(biāo)準(zhǔn)的Commonjs規(guī)范的模塊。

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可以是個(gè)字符串或數(shù)組或者是對(duì)象。

當(dāng)entry是個(gè)字符串的時(shí)候，用來定義入口文件：

entry: './js/main.js'

當(dāng)entry是個(gè)數(shù)組的時(shí)候，里面同樣包含入口js文件，另外一個(gè)參數(shù)可以是用來配置webpack提供的一個(gè)靜態(tài)資源服務(wù)器，webpack-dev-server。webpack-dev-server會(huì)監(jiān)控項(xiàng)目中每一個(gè)文件的變化，實(shí)時(shí)的進(jìn)行構(gòu)建，并且自動(dòng)刷新頁面：

entry: [
  'webpack/hot/only-dev-server',
  './js/app.js'

當(dāng)entry是個(gè)對(duì)象的時(shí)候，我們可以將不同的文件構(gòu)建成不同的文件，按需使用，比如在我的hello頁面中只要\引入hello.js即可：

 entry: {
  hello: './js/hello.js',
  form: './js/form.js'
 }

2.output

output參數(shù)是個(gè)對(duì)象，用于定義構(gòu)建后的文件的輸出。其中包含path和filename：

 output: {
  path: './build',
  filename: 'bundle.js'
 }

當(dāng)我們在entry中定義構(gòu)建多個(gè)文件時(shí)，filename可以對(duì)應(yīng)的更改為[name].js用于定義不同文件構(gòu)建后的名字。

3.module

關(guān)于模塊的加載相關(guān)，我們就定義在module.loaders中。這里通過正則表達(dá)式去匹配不同后綴的文件名，然后給它們定義不同的加載器。比如說給less文件定義串聯(lián)的三個(gè)加載器（！用來定義級(jí)聯(lián)關(guān)系）：

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時(shí)自動(dòng)處理為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來的文件會(huì)內(nèi)聯(lián)到 js bundle中。如果我們需要把保留require的寫法又想把css文件單獨(dú)拿出來，可以使用下面提到的[extract-text-webpack-plugin]插件。

在上面示例代碼中配置的第一個(gè)loaders我們可以看到一個(gè)叫做react-hot的加載器。我的項(xiàng)目是用來學(xué)習(xí)react寫相關(guān)代碼的，所以配置了一個(gè)react-hot加載器，通過它，可以實(shí)現(xiàn)對(duì)react組件的熱替換。我們已經(jīng)在entry參數(shù)中配置了webpack/hot/only-dev-server,所以我們只要在啟動(dòng)webpack開發(fā)服務(wù)器時(shí)開啟–hot參數(shù)，就可以使用react-hot-loader了。在package.json文件中這樣定義：

"scripts": {
  "start": "webpack-dev-server --hot --progress --colors",
  "build": "webpack --progress --colors"
 }

4.resolve

webpack在構(gòu)建包的時(shí)候會(huì)按目錄的進(jìn)行文件的查找，resolve屬性中的extensions數(shù)組中用于配置程序可以自行補(bǔ)全哪些文件后綴：

 resolve:{
  extensions:['','.js','.json']
 }

然后我們想要加載一個(gè)js文件時(shí)，只要require(‘common')就可以加載common.js文件了。

6.externals

當(dāng)我們想在項(xiàng)目中require一些其他的類庫或者API，而又不想讓這些類庫的源碼被構(gòu)建到運(yùn)行時(shí)文件中，這在實(shí)際開發(fā)中很有必要。此時(shí)我們就可以通過配置externals參數(shù)來解決這個(gè)問題：

 externals: {
  "jquery": "jQuery"
 }

這樣我們就可以放心的在項(xiàng)目中使用這些API了：var jQuery = require(“jquery”);

7.context

當(dāng)我們在require一個(gè)模塊的時(shí)候，如果在require中包含變量，像這樣：

require("./mods/" + name + ".js");

那么在編譯的時(shí)候我們是不能知道具體的模塊的。但這個(gè)時(shí)候，webpack也會(huì)為我們做些分析工作：

1.分析目錄：'./mods'；

2.提取正則表達(dá)式：'/^.*.js$/'；

于是這個(gè)時(shí)候?yàn)榱烁玫嘏浜蟱enpack進(jìn)行編譯，我們可以給它指明路徑，像在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 參數(shù)詳解就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論