什麼是webpack?
webpack是為瀏覽器構建js模組指令碼的前端工具
webpack需要乙個配置檔案，名叫：webpack.config.js
1 入口檔案
webpack會讀取入口檔案，並構建成bundle.js檔案
// centry file
module.exports=
}
這對於多頁面多應用很有用，因為每個頁面都需要不同的js檔案
// main1.js
document.write('');
// main2.js
document.write('');
module.exports=,
output:
}
loaders是預處理器，在webpack構建之前會處理一些js檔案，比如babel-loader他可以處理jsx/es6的檔案，轉換成普通的瀏覽器可以識別js檔案
// main.jsx
const react = require('react');
const reactdom = require('react-dom');
reactdom.render(
,);
module.exports=,
modules:}}
]}
}上面的**使用babel-loader載入js檔案，並需要babel的預處理外掛程式babel-preset-es2015 babel-preset-react來處理es6和jsx檔案
預處理css檔案
module.exports=,
modules:]}
}
載入的預處理器 url-loader
module.exports=,
modules:}}
]}
}
6 css module
啟用css的modules可以修改css的使用範圍 通過:gloable
/* local scope 區域性有效*/
.h1
/* global scope 全域性有效*/
:global(.h2)
module.exports=,
modules:,}]}
]}
}
js壓縮外掛程式
var webpack = require('webpack');
var uglifyjsplugin = require('uglifyjs-webpack-plugin')
module.exports=,
plugins:[
new uglifyjsplugin()
]}
html webpack plugin外掛程式自動建立index.html檔案，省去了你建立它的麻煩
open browser webpack plugin外掛程式在webpack處理完js後會自動打卡瀏覽器訪問網頁。
var htmlwebpackplugin = require('html-webpack-plugin');
var openbrowserplugin = require('open-browser-webpack-plugin');
module.exports=,
plugins:[
new htmlwebpackplugin(),
new openbrowserplugin()
]}
main.js
document.write('');
if (__dev__)
var webpack = require('webpack')
var devflagplugin = new webpack.defineplugin()
module.exports=,
plugins:[
devflagplugin,
]}
// package.json
, // ...
}
對於大的web應用，把所有的js檔案放在乙個檔案裡是效率很低的，webpack允許把js檔案分成幾個分支
如果一些js檔案只是在某些環境下才用到，可以使用命令載入他們
require.ensure(['./a.js'],function (require) )11 使用bundle-loader分割**
另一種分割**的方法是使用bundle-loader
main.js
var load = require('bundle-loader!./a.js')
load(function (file) )
12:common chunk
當很多js檔案有公共**時，我們需要將這些公共當部分分割到乙個檔案下。這時
就需要使用commonchunkplugin
module.exports=,
plugins:[
new webpack.optimize.commonschunkplugin()
]}
你可以使用commonchunkplugin將第三方外掛程式從指令碼提取到單獨的檔案中
main.js
var $ = require('jquery')
$('h1').text('hello world')
webpack.config.js
module.exports=,
output:,
plugins:[
new webpack.optimize.commonschunkplugin()
]}上面的**entry.vendor:['jquery']告訴webpack jquery應該載入到公共模組vendor.js 中
module.exports=,
plugins:[
new webpack.provideplugin()
]}
如果你想使用一些全域性變數，但是不想把他們引入到bundle檔案裡，可以在webpack.config.js檔案中啟用
externals欄位
data.js
var data = 'hello world'
index.html
我們可以把data作為全域性變數暴露出來
module.exports=,
externals:
}
// main.jsx
var data = require('data');
var react = require('react');
var reactdom = require('react-dom');
reactdom.render(
, document.body
);
SpringCloud 使用知識點
伺服器發現 eureka zookeeper consul nacos 服務之間互相呼叫 resttemplate feign 負載均衡 ribbon 訊息中介軟體 rabbit kafka。spring cloud stream 配置中心 config server spring bus 自動更新...
CSS使用知識點
1.空白符 2.字元間距 3.省略號樣式 4.水平垂直居中用法 5.css角標實現 空格符 1.相當於鍵盤按下的空格，區別是 是可以累加的空格，鍵盤敲下的空格不會累加 2.相當於1 2中文寬度的空格，透明，基本不受字型影響 3.相當於乙個中文寬度的空格，透明，基本不受字型影響 4.窄空格，所佔寬度較...
TestLink知識點Mantis知識點
testlink知識點 1 testlink系統提供了六種角色 a guest 只有讀的許可權，適合於檢視測試用例和測試需求，以及專案分析的使用者。b testdesigner 可以開展測試用例和測試需求的所有工作。c tester 只能執行測試用例。d senior tester 可以檢視和維護測...