前端模塊加載
兩種極端的方式
(1)每個模塊文件都單獨請求鹿驼，請求次數(shù)過多辕宏，應(yīng)用啟動速度慢。
(2)把所有模塊打包成一個文件然后只請求一次瑞筐，導(dǎo)致流量浪費、初始化過程慢聚假。
合理的方式
分塊傳輸，按需進(jìn)行懶加載魔策，在實際用到某些模塊的時候再增量更新
Webpack
Webpack是一個模塊打包器河胎。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對應(yīng)的靜態(tài)資源
安裝webpack
npm install webpack -g
或者加到package.json
npm install webpack --save-dev
# 指定版本
npm install webpack@1.12.x --save-dev
webpack server
npm install webpack-dev-server --save-dev
# 運行
webpack-dev-server --progress --colors
默認(rèn)配置文件為webpack.config.js
可以改成自定義配置
webpack --config customconfig.js
常見操作
啟動
webpack
實時編譯
webpack --watch
# 加上進(jìn)度和顏色
webpack --progress --colors --watch
webpack -p 來針對發(fā)布環(huán)境編譯(壓縮代碼)
webpack --display-error-details 查看查找過程
webpack -d 來生成 SourceMaps
Webpack配置
// webpack.config.js
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: ['./src/index'], //entry 是指入口文件的配置項
output: { //output是指輸出文件的配置項
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false,
},
}),
new webpack.optimize.OccurenceOrderPlugin()
],
module: {
loaders: [{
test: /\.css$/,
loaders: ['style', 'css']
}]
}
}
代碼拆分政敢，同步和異步兩種加載方式胚迫。每一個異步區(qū)塊作為一個文件打包
對 CommonJS 的 AMD 的語法做了兼容, 方便遷移代碼
Loader，將各種類型的資源轉(zhuǎn)換為JavaScript模塊
插件系統(tǒng)访锻，webpack插件
loader
通過管道方式鏈?zhǔn)秸{(diào)用闹获，每個 loader 可以把資源轉(zhuǎn)換成任意格式并傳遞給下一個 loader 河哑，但是最后一個 loader 必須返回 JavaScript
運行在 node.js 環(huán)境中，同步或異步執(zhí)行
接受參數(shù)璃谨，以此來傳遞配置項給 loader
通過文件擴(kuò)展名（或正則表達(dá)式）綁定給不同類型的文件
通過 npm 發(fā)布和安裝
可以訪問配置
按照慣例，而非必須佳吞，loader 一般以 xxx-loader 的方式命名，xxx 代表了這個 loader 要做的轉(zhuǎn)換功能底扳，比如 json-loader
安裝 loader
npm install css-loader style-loader
壓縮 JavaScript
plugins: [
new webpack.optimize.MinChunkSizePlugin(minSize)
]
打包多個包
首先 entry 有多個屬性, 對應(yīng)多個 JavaScript 包，然后 commonsPlugin 可以用于分析模塊的共用代碼, 單獨打一個包出來
// webpack.config.js
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
entry: {
Profile: './profile.js',
Feed: './feed.js'
},
output: {
path: 'build',
filename: '[name].js' // Template based on keys in entry above
},
plugins: [commonsPlugin]
};
revision
Option 1: One hash for the bundle
output: {
path: path.join(__dirname, "assets", "[hash]"),
publicPath: "assets/[hash]/",
filename: "output.[hash].bundle.js",
chunkFilename: "[id].[hash].bundle.js"
}
Option 2: One hash per chunk
output: { chunkFilename: "[chunkhash].bundle.js" }
CDN
設(shè)置 output.publicPath
功能開關(guān)
在開發(fā)環(huán)境使用(比如 log)羡滑，輸出日志算芯，模擬數(shù)據(jù)等等
if (__DEV__) {
console.warn('logging');
}
// webpack.config.js
// definePlugin 接收字符串插入到代碼當(dāng)中, 所以你需要的話可以寫上 JS 的字符串
var definePlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true'))
});
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
plugins: [definePlugin]
};
執(zhí)行，可添加到package.json
BUILD_DEV=1 webpack
"scripts": {
"dev": "BUILD_DEV=1 webpack",
"build": "BUILD_DEV=0 webpack"
},
