A. 如何解決webpack打包的文件體積過大的問題
使用weboack的watch，只有文件md5變化時，才會重新打包，並且只parse有變化的文件，其他沒變化的文件是使用緩存的。
B. webpack怎麼處理大於100k的庫
你好，每次打包從入口開始，會parse所有的依賴，多的時候竟然打包一次要2秒多，簡直不能忍。然而，有幾個解決方案，最有效的，是使用weboack的watch，只有文件md5變化時，才會重新打包，並且只parse有變化的文件，其他沒變化的文件是使用緩存的。
打包在一起是為了減少 request 數量從而能並發更多請求，提升總體載入速度，所以臃腫的一個文件本來就是目的而非副作用。如果要解決調試問題可以使用 Source Map。
所謂的代碼分割，說白了就是模塊劃分，把大文件 breakdown 的同時還能進行依賴管理，降低開發和維護的成本，而這個的好處是體現在開發時而非上線後的，如果上線後還是一堆零散的文件，這個依賴管理工具還是趁早別做了.
C. webpack可以提高代碼的運行效率嗎
工具常見模塊化開發規范：CMD（seaJS）AMD（requireJS）一、webpack環境搭建1.webpack安裝首先需要安裝nodeJS，先在nodeJS官網下載，進行NodeJS安裝下載地址https://nodejs.org/en/download/下載完畢後，進行安裝，一切都以默認的選擇即可2.npm安裝安裝完畢後，打開cmd工具，輸入命令npminstall--savemocha等待安裝完畢3.webpack安裝cmd工具中，輸入命令npminstallwebpack-g執行命令安裝webpack到此webpack安裝完畢，可以使用webpack-h來查看版本號到此，webpack安裝完成二、webpack打包1.打開cmd工具，進入你的開發文件夾，其中此文件夾必須包含webpack.config.js文件，config配置參考如下varwebpack=require("webpack")mole.exports={entry:{"mcDemoMain":"./mcDemoMain.js"//直接require進來的文件會直接打包到這個文件中，如require('./common/Enum')，延遲載入的文件則不會，如require("bundle?lazy&name=demo!./demo/demo1")},output:{path:"../../dist/demo/1.0",//設置打包後的js的輸出位置filename:"[name].js",//和入口文件的名字相同chunkFilename:"[name].young.js",//值模塊里需要單獨打包的文件require.ensure//path:path.join(__dirname,'static/js/app/dist'),//設置打包後的js的輸出位置//filename:"[name].[hash].js",//和入口文件的名字相同publicPath:"[sDomain]static/dist/demo/1.0/"//瀏覽器會從這個目錄開始查找模塊},mole:{loaders:[//{test:/\.css$/,loader:"style!css"},//{test:/\.js[x]?$/,exclude:/node_moles/,loader:'babel-loader',query:{presets:'es2015'}},]},plugins:[newwebpack.BannerPlugin('文件頂部注釋說明'),//newwebpack.IgnorePlugin(/\.\/AsnyMoleA.js$/),//排除不想打包進去的插件//newwebpack.ProvidePlugin({//這是把jquery掛到全局上，不用每個模塊都去require//"AsnyMoleA":'../../../dist/demo/AsnyMoleA.js',//}),//newwebpack.optimize.CommonsChunkPlugin('common.js')//有多個入口文件的話提取公共部分，利用瀏覽器緩存然後commonsPlugin可以用於分析模塊的共用代碼,單獨打一個包出來:],resolve:{//molesDirectories:'C:\Users\Administrator\AppData\Roaming\npm\node_moles',//["C:\Users\Administrator\AppData\Roaming\npm\node_moles"],//root:'C:\Users\Administrator\AppData\Roaming\npm\node_moles',alias:{//jquery:path.join(__dirname,'dev/jquery/jquery.js'),//AsnyMoleA:"../../../dist/demo/start/commom/AsnyMoleA.js",//在正常情況下我們以CommonJS風格引用avalon,以require('avalon')//'../avalon':path.join(__dirname,'dev/avalon/avalon.js')//由於oniui都以是../avalon來引用avalon的，需要在這里進行別名}},//externals:{//'AsnyMoleA':'AsnyMoleA'//}}2.cmd進入開發目錄後，輸入webpack就可以進行打包了，如果顯示以下則表示成功
D. webpack生成bundle.js文件為什麼那麼大，會影響載入速度嗎
當然會比較大，因為不光打包了自己開發的JavaScript文件，還把依賴(就是那些第三方的庫文件)也都打包進去了，確實會比較大。
webpack的好處有幾項
解決依賴關系
多模塊化標准支持
多功能插件支持
相比這些在軟體工程中急需解決的問題，「大」這個小事兒可以通過其他方式解決。
譬如，
uglify，可以很大程度上壓縮源代碼，使之體積減小。
或者通過nginx的gzip_comp_level選項可以設置1 ~ 9不同的壓縮級別，以降低網路傳輸壓力。
兩者混用效果奇佳，而且也是最常見最有效的方式
例如React.js的源文件有610k左右，uglify之後已經不到200k了，再通過nginx壓縮一把，用戶在瀏覽器下載時，只有40k左右了。
以當今的網路環境，除非自己有精確測試結果，否則真心沒必要一開始就考慮什麼文件大小的問題，咱們已經不是那個時代了
E. webpack到底怎麼用
30分鍾手把手教你學webpack實戰
首先對於很多剛接觸webpack人來說，肯定會問webpack是什麼？它有什麼優點？我們為什麼要使用它？帶著這些問題，我們來總結下如下：
Webpack是前端一個工具，可以讓各個模塊進行載入，預處理，再進行打包，它能有Grunt或Gulp所有基本功能。優點如下：
支持commonJS和AMD模塊。
支持很多模塊載入器的調用，可以使模塊載入器靈活定製，比如babel-loader載入器，該載入器能使我們使用ES6的語法來編寫代碼。
可以通過配置打包成多個文件，有效的利用瀏覽器的緩存功能提升性能。
使用模塊載入器，可以支持sass，less等處理器進行打包且支持靜態資源樣式及圖片進行打包。
更多等等。。。帶著這些問題我們慢慢來學習webpack。
https://www.cnblogs.com/tugenhua0707/p/4793265.html
F. 如何解決webpack使用時內存佔用過大的問題
你可以調大你的虛擬內存（我的電腦點右鍵-屬性-高級-性能設置-虛擬內存）來彌補這一缺陷，PS軟體的首選項-性能也可以調節內存情況和緩存
G. 如何用webpack實現靜態資源攔截替換
lugins: [
new webpack.optimize.UglifyJsPlugin({ // 壓縮webpack 後生成的代碼較長時間，通常推到生產環境中才使用
compress:{
warnings: false
}
}),
new htmlWebpackPlugin({ // webpack 指定目錄(package內設置)生成靜態HTML文件
title: "自動生成網頁標題",
filename: "test.html",
template: "temIndex.html",
hash: true, // true | false。如果是true，會給所有包含的script和css添加一個唯一的webpack編譯hash值。這對於緩存清除非常有用。
inject: true, // | 'head' | 'body' | false ,注入所有的資源到特定的 template 或者 templateContent 中，如果設置為 true 或者 body，所有的 javascript 資源將被放置到 body 元素的底部，'head' 將放置到 head 元素中。
chunks: ["app"] // 使用chunks 需要指定entry 入口文件中的哪一個模塊
})
]
Installation
使用 npm 安裝這個插件
$ npm install html-webpack-plugin@2 --save-dev
Basic Usage
這個插件可以幫助生成 HTML 文件，在 body 元素中，使用 script 來包含所有你的 webpack bundles，只需要在你的 webpack 配置文件中如下配置：
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpackConfig = {
entry: 'index.js',
output: {
path: 'dist',
filename: 'index_bundle.js'
},
plugins: [new HtmlWebpackPlugin()]
}
這將會自動在 dist 目錄中生成一個名為 index.html 的文件，內容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>
H. 有沒有webpack的中文文檔
確實，每次打包從入口開始，會parse所有的依賴，多的時候竟然打包一次要2秒多，簡直不能忍。然而，有幾個解決方案，最有效的，是使用weboack的watch，只有文件md5變化時，才會重新打包，並且只parse有變化的文件，其他沒變化的文件是使用緩存的
I. webpack到底有什麼用
1. 為什麼用 webpack?
他像 Browserify, 但是將你的應用打包為多個文件. 如果你的單頁面應用有多個頁面, 那麼用戶只從下載對應頁面的代碼. 當他么訪問到另一個頁面, 他們不需要重新下載通用的代碼.
他在很多地方能替代 Grunt 跟 Gulp 因為他能夠編譯打包 CSS, 做 CSS 預處理, 編譯 JS 方言, 打包圖片, 還有其他一些.
它支持 AMD 跟 CommonJS, 以及其他一些模塊系統, (Angular, ES6). 如果你不知道用什麼, 就用 CommonJS.
2. Webpack 給 Browserify 的同學用
對應地:
browserify main.js > bundle.js
webpack main.js bundle.js
Webpack 比 Browserify 更強大, 你一般會用 webpack.config.js 來組織各個過程:
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
這僅僅是 JavaScript, 可以隨意添加要運行的代碼.
3. 怎樣啟動 webpack
切換到有 webpack.config.js 的目錄然後運行:
webpack 來執行一次開發的編譯
webpack -p for building once for proction (minification)
webpack -p 來針對發布環境編譯(壓縮代碼)
webpack --watch 來進行開發過程持續的增量編譯(飛快地!)
webpack -d 來生成 SourceMaps
4. JavaScript 方言
Webpack 對應 Browsserify transform 和 RequireJS 插件的工具稱為 loader. 下邊是 Webpack 載入 CoffeeScript 和 Facebook JSX-ES6 的配置(你需要 npm install jsx-loader coffee-loader):
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
mole: {
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' } // loaders 可以接受 querystring 格式的參數
]
}
};
要開啟後綴名的自動補全, 你需要設置 resolve.extensions 參數指明那些文件 Webpack 是要搜索的:
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
mole: {
loaders: [
{ test: /\.coffee$/, loader: 'coffee-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' }
]
},
resolve: {
// 現在可以寫 require('file') 代替 require('file.coffee')
extensions: ['', '.js', '.json', '.coffee']
}
};
5. 樣式表和圖片
首先更新你的代碼用 require() 載入靜態資源(就像在 Node 里使用 require()):
require('./bootstrap.css');
require('./myapp.less');
var img = document.createElement('img');
img.src = require('./glyph.png');
當你引用 CSS(或者 LESS 吧), Webpack 會將 CSS 內聯到 JavaScript 包當中, require() 會在頁面當中插入一個 ｀<style>標簽. 當你引入圖片, Webpack 在包當中插入對應圖片的 URL, 這個 URL 是由require()` 返回的.
你需要配置 Webpack(添加 loader):
// webpack.config.js
mole.exports = {
entry: './main.js',
output: {
path: './build', // 圖片和 JS 會到這里來
publicPath: 'http://mycdn.com/', // 這個用來成成比如圖片的 URL
filename: 'bundle.js'
},
mole: {
loaders: [
{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // 用 ! 來連接多個人 loader
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // 內聯 base64 URLs, 限定 <=8k 的圖片, 其他的用 URL
]
}
};
6. 功能開關
有些代碼我們只想在開發環境使用(比如 log), 或者 dogfooging 的伺服器里邊(比如內部員工正在測試的功能). 在你的代碼中, 引用全局變數吧:
if (__DEV__) {
console.warn('Extra logging');
}
// ...
if (__PRERELEASE__) {
showSecretFeature();
}
然後配置 Webpack 當中的對應全局變數:
// webpack.config.js
// definePlugin 接收字元串插入到代碼當中, 所以你需要的話可以寫上 JS 的字元串
var definePlugin = new webpack.DefinePlugin({
__DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')),
__PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false'))
});
mole.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
plugins: [definePlugin]
};
然後你在控制台里用 BUILD_DEV=1 BUILD_PRERELEASE=1 webpack 編譯. 注意一下因為 webpack -p 會執行 uglify dead-code elimination, 任何這種代碼都會被剔除, 所以你不用擔心秘密功能泄漏.
7. 多個進入點(entrypoints)
比如你用 profile 頁面跟 feed 頁面. 當用戶訪問 profile, 你不想讓他們下載 feed 頁面的代碼. 因此你創建多個包: 每個頁面一個 "main mole":
// webpack.config.js
mole.exports = {
entry: {
Profile: './profile.js',
Feed: './feed.js'
},
output: {
path: 'build',
filename: '[name].js' // 模版基於上邊 entry 的 key
}
};
針對 profile, 在頁面當中插入 <script src="build/Profile.js"></script>. feed 頁面也是一樣.
8. 優化共用代碼
feed 頁面跟 profile 頁面共用不要代碼(比如 React 還有通用的樣式和 component). Webpack 可以分析出來他們有多少共用模塊, 然後生成一個共享的包用於代碼的緩存.
// webpack.config.js
var webpack = require('webpack');
var commonsPlugin =
new webpack.optimize.CommonsChunkPlugin('common.js');
mole.exports = {
entry: {
Profile: './profile.js',
Feed: './feed.js'
},
output: {
path: 'build',
filename: '[name].js'
},
plugins: [commonsPlugin]
};
在上一個步驟的 script 標簽前面加上 <script src="build/common.js"></script> 你就能得到廉價的緩存了.
9. 非同步載入
CommonJS 是同步的, 但是 Webpack 提供了非同步指定依賴的方案. 這對於客戶端的路由很有用, 你想要在每個頁面都有路由, 但你又不像在真的用到功能之前就下載某個功能的代碼.
聲明你想要非同步載入的那個"分界點". 比如:
if (window.location.pathname === '/feed') {
showLoadingState();
require.ensure([], function() { // 語法奇葩, 但是有用
hideLoadingState();
require('./feed').show(); // 函數調用後, 模塊保證在同步請求下可用
});
} else if (window.location.pathname === '/profile') {
showLoadingState();
require.ensure([], function() {
hideLoadingState();
require('./profile').show();
});
}
Webpack 會完成其餘的工作, 生成額外的 chunk 文件幫你載入好.
Webpack 在 HTML script 標簽中載入他們時會假設這些文件是怎你的根路徑下. 你可以用 output.publicPath 來配置.
// webpack.config.js
output: {
path: "/home/proj/public/assets", // path 指向 Webpack 編譯能的資源位置
publicPath: "/assets/" // 引用你的文件時考慮使用的地址
J. 如何解決webpack使用時內存佔用過大的問題
可以考慮開發的時候，頁面中載入的是源碼，然後用livereload實現有修改，自動刷新頁面
然後在進行release發布的時候，打包編譯，測試看看有沒有問題。
這樣進行編譯的次數就少了。webpack是可以支持requirejs的AMD的寫法的吧