首頁 > web前端 > js教程 > 主體

webpack.config.js參數使用教程

php中世界最好的语言
發布: 2018-06-15 14:36:57
原創
1738 人瀏覽過

這次帶給大家webpack.config.js參數使用教程,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);
登入後複製

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

如何使用Linux重复加载 .vimrc文件

vue-cli+webpack无法新建项目

以上是webpack.config.js參數使用教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!