<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          大多數項目中會用到的webpack小技巧

          時間:?2017-12-01閱讀:?1675標簽:?webpack

          原文地址 
          本文是作者對自己所學的webpack技巧的總結,在沒有指定特殊情況下適用于webpack 3.0版本。

          進度匯報

          使用webpack --progress --colors這樣可以讓編譯的輸出內容帶有進度和顏色。

          壓縮

          在生產環境中構建項目時,使用

          webpack -p

          這行代碼在webpack 2中還會自動設置

          process.env.NODE_ENV === 'production'

          復數文件打包

          通過設置output屬性為[name].js來導出復數包。下面的例子將會生成a.js和b.js。

          module.exports = {
            entry: {
              a: './a',
              b: './b'
            },
            output: { filename: '[name].js' }
          }

          擔心會重復打包?使用 CommonsChunkPlugin 來把通用部分移入一個新的輸出文件中。

          plugins: [ new webpack.optimize.CommonsChunkPlugin('init.js') ]
          <script src='init.js'></script>
          <script src='a.js'></script>

          分離app文件與第三方庫文件

          使用CommonsChunkPlugin將第三方代碼移動到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')
            ]
          }

          讓我們來看看,CommonsChunkPlugin是怎么起作用的:

          • 我們指定了一個叫vendor的入口,并且它加載了jquery等第三方庫。
          • CommonsChunkPlugin識別到這些第三方庫在app.js中出現重復,便將app.js中的第三方庫都移除。
          • 在vendor.js中,CommonsChunkPlugin還加入了webpack的運行時間。

          參考鏈接:Code splitting

          資源映射 (webpack 1)

          最好的資源映射選項是cheap-module-eval-source-map。當使用chrome/firefox的開發者工具時,它會顯示原始資源文件。另一方面,它比source-map 和 eval-source-map更快。

          // 只在webpack 1中有效
          const DEBUG = process.env.NODE_ENV !== 'production'
          
          module.exports = {
            debug: DEBUG ? true : false,
            devtool: DEBUG ? 'cheap-module-eval-source-map' : 'hidden-source-map'
          }

          你的文件在chrome開發者工具中顯示為webpack:///foo.js?a93h。如果我們希望文件名顯示得更清晰呢,比如說webpack:///path/to/foo.js?

          output: {
              devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]'
          }

          參考鏈接: devtool documentation

          資源映射(webpack 2-3)

          在webpack 2-3版本中,最好的資源映射選項是cheap-module-source-map,因為cheap-module-eval-source-map策略已經不能在chrome/firefox中顯示正確的路徑。

          const DEBUG = process.env.NODE_ENV !== 'production'
          
          module.exports = {
            devtool: DEBUG ? 'cheap-module-source-map' : 'hidden-source-map'
          }

          如果你正在使用extract-text-webpack-plugin,可以用'source-map'替代,否則css的資源映射會不起作用。

          // 只有當你使用extract-text-webpack-plugin時
          module.exports = {
            devtool: DEBUG ? 'source-map' : 'hidden-source-map'
          }

          同樣的, 想要 webpack:///path/to/foo.js這樣清晰的路徑,我們可以寫成下面這樣:

          output: {
            devtoolModuleFilenameTemplate: 'webpack:///[absolute-resource-path]'
          }

          參考鏈接: devtool documentation

          輸出css文件

          這是一個復雜的過程,你可以在這里找到答案。(譯者注:這篇指南目前還沒有翻譯。)

          開發模式

          你想要某些配置只存在于開發環境中嗎?

          const DEBUG = process.env.NODE_ENV !== 'production'
          
          // Webpack 1
          module.exports = {
            debug: DEBUG ? true : false,
            devtool: DEBUG ? 'cheap-module-eval-source-map' : 'hidden-source-map'
          }
          
          // Webpack 2
          module.exports = {
            devtool: DEBUG ? 'cheap-module-source-map' : 'hidden-source-map'
          }

          在webpack 1中,打包你的項目資源時,通過 env NODE_ENV=production webpack -p 來調用webpack命令。
          而在webpack 2中,只要webpack -p就可以了,因為webpack自動幫你設置了NODE_ENV。

          分析包的大小

          你想知道資源包中有哪些“重量級”依賴嗎?使用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%)
          ...

          如果你正在生成資源映射,你也可以使用source-map-explorer,它能夠獨立于webpack工作。

          $ yarn global add source-map-explorer
          
          $ source-map-explorer bundle.min.js bundle.min.js.map

          參考鏈接: 
          webpack-bundle-size-analyzer 
          source-map-explorer

          更小的react項目

          react會默認生成一些開發工具,而在生產環境中你并不需要它們。使用EnvironmentPlugin來讓他們人道毀滅吧。這大概會節約30kb左右的空間。

          plugins: [
            new webpack.EnvironmentPlugin({
              NODE_ENV: 'development'
            })
          ]

          在webpack 1中,使用env NODE_ENV=production webpack -p命令啟動webpack來打包資源。而在webpack 2中,只要webpack -p就可以了,理由略。

          參考鏈接: EnvironmentPlugin documentation

          更小的Lodash

          Lodash 非常有用,但是我們通常用到的只是其功能中的滄海一粟。 lodash-webpack-plugin 可以使用noopidentity或其他更簡化的選項來替換 feature sets,來幫助你減少lodash占用的空間。

          const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
          
          const config = {
            plugins: [
              new LodashModuleReplacementPlugin({
                path: true,
                flattening: true
              })
            ]
          };

          這種方法可以幫助你省下至少10kb。如果你的項目中lodash的比重很高,那你節省的資源會更多。

          引入文件夾中所有文件

          你是不是曾經嘗試過下面的代碼卻發現不起作用?

          require('./behaviors/*') /* 看似很正確 */

          事實上,你應該使用require.context。

          // http://stackoverflow.com/a/30652110/873870
          function requireAll (r) { r.keys().forEach(r) }
          
          requireAll(require.context('./behaviors/', true, /\.js$/))

          參考鏈接: require.context

          清除extract-text-webpack-plugin日志

          如果你在使用extract-text-webpack-plugin時看過下面的調試日志:

          Child extract-text-webpack-plugin:
                  + 2 hidden modules
          Child extract-text-webpack-plugin:
                  + 2 hidden modules
          Child extract-text-webpack-plugin:
                  + 2 hidden modules

          你可以使用stats: { children: false }來關閉它:

          /* webpack.config.js */
          stats: {
            children: false,
          },

          參考鏈接: extract-text-webpack-plugin#35

          總結

          以上就是rstacruz總結的13條關于webpack的建議,這幾乎是所有項目都用得到的Webpack配置技巧吧~

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/208

          Webpack中如何編寫一個自定義的loader

          Webpack中loader是一個CommonJs風格的函數,接收輸入的源碼,通過同步或異步的方式替換源碼后進行輸出。需要注意的是,該導出函數必須使用function,不能使用箭頭函數,因為loader編寫過程中會經常使用到this訪問選項和其他方法。

          webpack 中 import css 文件報錯: Module build failed...

          項目中引入了css文件,配置了 rules 中:在執行 webpack 命令時,發生錯誤,報錯信息:Module build failed (from ./node_modules/css-loader/dist/cjs.js):CssSyntaxError,經查詢,是loader順序不正確導致此問題,修改后如下:

          webpack 階段回顧 之 webpack-dev-server

          webpack-dev-server是一個讓我們可以模擬線上環境進行項目調試的工具,主要功能有:路徑重定向、瀏覽器中顯示編譯錯誤、接口代理 如解決跨域、熱更新

          《深入淺出webpack》有感

          nodejs的出現對于構建工具具有重要的意義,在沒有nodejs之前,js只能執行在瀏覽器環境下,所以意味著對發布前的js文件要進行處理,十分局限,沒有打包工具,只能用PHP腳本來處理文件

          webpack是什么?

          webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時,它會遞歸地構建一個依賴關系圖(dependency graph),其中包含應用程序需要的每個模塊,然后將所有這些模塊打包成一個或多個 bundle

          webpack的optimization.namedModules

          optimization.namedModules 這個配置對于調試起來很方便,比如原本生產的一段代碼是長這樣的:很多奇怪的數字,比如最后幾行的 [0,0] 是表示了什么意思?如果配置上namedModules 為true呢

          為什么要用webpack?

          現今的很多網頁其實可以看做是功能豐富的應用,它們擁有著復雜的JavaScript代碼和一大堆依賴包。模塊化,讓我們可以把復雜的程序細化為小的文件;

          webpack 從入門到放棄

          隨著前端項目復雜程度越來越高,依賴也越來越多,為了提高項目中代碼的可復用性,前端開始提出模塊化開發的思路,前端模塊化會有以下幾個痛點:命名沖突,文件依賴,代碼復用

          Webpack知識點

          Webpack從基礎概念到項目配置,涉及知識點較多,現將學習使用過程中遇到內容記錄下來,方便以后速查。Webpack是一個模塊打包工具,在Webpack里一切文件皆模塊。通過loader轉換文件,通過plugin注入鉤子

          webpack3 升級 webpack4踩坑記錄

          安裝webpack4最新版本;這個在webpack3中,webpack本身和它的CLI是在同一個包中,webpack4中將兩個分開管理。記得添加mode用來告知 webpack 使用相應環境的內置優化

          fly63.com版權所有,內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网