建站
咨詢
售后
建站咨詢
新聞中心
在使用Webpack的過(guò)程中總結(jié)的一系列建議與技巧，不過(guò)需要注意的是這些小技巧都是關(guān)于Webpack 1的。Webpack 2與Webpack 1相比其API發(fā)生了較大變化，本文提及的不少技巧可能在Webpack 2并不能起作用。如果你想了解從Webpack 1遷移到Webpack 2的詳細(xì)教程，可以參考這里，另外可以參考筆者的基于Webpack 2的模板 Webpack2-React-Redux-Boilerplate。
創(chuàng)新互聯(lián)專注于企業(yè)營(yíng)銷型網(wǎng)站、網(wǎng)站重做改版、濱江網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、成都做商城網(wǎng)站、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為濱江等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。
進(jìn)度反饋
可以在使用Webpack的時(shí)候添加如下選項(xiàng):
- --progress --colors
壓縮
可以在進(jìn)行生產(chǎn)環(huán)境構(gòu)建時(shí)添加-p選項(xiàng)：
- webpack -p
多模塊分割
在設(shè)置output的文件名時(shí)可以使用[name].js多匹配名，如下的例子會(huì)生成a.js與b.js：
- module.exports = {
- entry: {
- a: './a',
- b: './b'
- },
- output: { filename: '[name].js' }
- }
如果你擔(dān)心代碼重復(fù)的問(wèn)題，可以使用CommonsChunkPlugin來(lái)抽取出多個(gè)輸出文件的公共代碼:
- plugins: [ new webpack.optimize.CommonsChunkPlugin('init.js') ]
分割應(yīng)用于渲染代碼
同樣是使用CommonsChunkPlugin來(lái)講公共的渲染代碼移動(dòng)到vendor.js中:
- var webpack = require('webpack')
- module.exports = {
- entry: {
- app: './app.js',
- vendor: ['jquery', 'underscore', ...]
- },
- output: {
- filename: '[name].js'
- },
- plugins: [
- new webpack.optimize.CommonsChunkPlugin('vendor')
- ]
- }
其工作流程如下，具體可以參考Code Splitting:
- 添加vendor入口并且指定關(guān)聯(lián)庫(kù)
- CommonsChunkPlugin會(huì)從app.js中移除相關(guān)庫(kù)
- CommonsChunkPlugin 同樣會(huì)把Webpack的運(yùn)行時(shí)依賴遷移到vendor.js中
Source Maps
目前***的Source Maps選項(xiàng)是cheap-module-eval-source-map，這個(gè)工具會(huì)幫助開(kāi)發(fā)環(huán)境下在Chrome/Firefox中顯示源代碼文件，其速度快于source-map與eval-source-map：
- const DEBUG = process.env.NODE_ENV !== 'production'
- module.exports = {
- debug: DEBUG ? true : false,
- devtool: DEBUG ? 'cheap-module-eval-source-map' : 'hidden-source-map'
- }
在Chrome Devtools你可以在webpack:///foo.js?a93h路徑下查看文件，也可以選擇自定義配置:
- output: {
- devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]'
- }
CSS
作者正在編輯中，請(qǐng)過(guò)幾日回來(lái)查看。
開(kāi)發(fā)模式
如果你希望在僅僅在開(kāi)發(fā)模式下開(kāi)啟某些選項(xiàng):
- const DEBUG = process.env.NODE_ENV !== 'production'
- module.exports = {
- debug: DEBUG ? true : false,
- devtool: DEBUG ? 'cheap-module-eval-source-map' : 'hidden-source-map'
- }
這個(gè)時(shí)候你需要注意在編譯生產(chǎn)環(huán)境版本時(shí)使用如下命令:env NODE_ENV=production webpack -p
包體組成分析
如果你覺(jué)得你的包體有點(diǎn)匪夷所思的大并且想具體了解到底是哪個(gè)模塊占據(jù)了大量的提及，可以使用webpack-bundle-size-analyzer:
- $ yarn global add webpack-bundle-size-analyzer
- $ ./node_modules/.bin/webpack --json | webpack-bundle-size-analyzer
- jquery: 260.93 KB (37.1%)
- moment: 137.34 KB (19.5%)
- parsleyjs: 87.88 KB (12.5%)
- bootstrap-sass: 68.07 KB (9.68%)
- ...
優(yōu)化React包體
React在開(kāi)發(fā)模式下會(huì)自帶開(kāi)發(fā)工具，而我們希望在生產(chǎn)環(huán)境下能夠移除該工具從而減少包體，我們可以通過(guò)如下配置:
- plugins: [
- new webpack.DefinePlugin({
- 'process.env': {
- 'NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
- }
- })
- ]
優(yōu)化Lodash
Lodash是非常不錯(cuò)的工具庫(kù)，不過(guò)很多時(shí)候我們僅需要其一小部分功能，此時(shí)lodash-webpack-plugin就派上了用場(chǎng):
- const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
- const config = {
- plugins: [
- new LodashModuleReplacementPlugin({
- path: true,
- flattening: true
- })
- ]
- };
引用某個(gè)文件夾中的所有文件
如果你希望達(dá)到如下的效果:
- require('./behaviors/*') /* Doesn't work! */
你需要使用require.context:
// stackoverflow.com/a/30652110/873870
- function requireAll (r) { r.keys().forEach(r) }
- requireAll(require.context('./behaviors/', true, /\.js$/))s
【本文是專欄作者“張梓雄 ”的原創(chuàng)文章，如需轉(zhuǎn)載請(qǐng)通過(guò)與作者聯(lián)系】
戳這里，看該作者更多好文
本文名稱：Webpack實(shí)踐技巧與建議
新聞來(lái)源：http://www.5511xx.com/article/dpdhjhe.html
