前言
本文演示了
開啟css-loader的模組化配置
當前專案目錄和package.json配置：：
如何使css模組化？需要在我們的webpack.config.js中對css-loader進行一些額外設定。
編輯main.css
執行 npm run dev
瀏覽器截圖如下:
可以看出瀏覽器控制台列印出的main是乙個js物件，所以我們在應用main.css中的類名的時候，需要用 main.ot 。
同理，我們可以新建多個css檔案（main1.css、main2.css），引用其中的類名的時候，只需要用main1.o或者main2.ot。這樣即使不同的樣式檔案中class重名也不會產生樣式的覆蓋。
但是，一旦開啟css模組化，意味著所引入的所有的css檔案都要用css模組化的寫法。
如何開啟單個樣式檔案的全域性模式呢（某個樣式檔案不想要css模組化的寫法）？
可以在webpack.config.js中配置兩次處理css的loader，配置如下圖：
上面的配置保證了在node_modules和src/common下的css是全域性的，在其之外的css是模組化的。
執行npm run dev,測試兩個樣式均正常載入。
開啟瀏覽器控制台，看到生成的html中的class名是一堆base64字元。
如何讓css模組化後生成的class具有可讀性？
配置webpack.config.js中css-loader的localidentname：
執行npm run dev，瀏覽器控制台截圖如下：
可以看出 '[path]-[name]-[local]-[hash:base64:6]' 對應 'src-common-style--main-ot-7lqhwv'。
一般，在專案中配置 localidentname: '[name]-[local]-[hash:base64:6]' 就可以。
webpack 及 模組化總結
通過 npm yarn 的方式來安裝 webpack 安裝方式 本地安裝 優勢 管理方便 易於復用 解決 專案開發過程中的衝突 依賴 基於amd的requirejs模組化庫 2.cmd common module definition cmd則是依賴就近。2 每乙個模組內宣告的變數都是區域性變數，不...
webpack初探與模組化
沒有webpack的缺點 量大時，可讀性不好 函式間依賴嚴重，維護性不好 協作開發，容易變數命名衝突我們引入js標籤的問題 如果乙個script不好維護 當script標籤很多會有效能問題 同步載入會阻塞，非同步載入瀏覽器網路請求只能載入6個js檔案 2.作用域問題 可能會導致全域性變數汙染 add...
css模組化策略
block element modifier 塊 元素 修飾封裝靠人為約定。繼承靠層疊特性。分治性強，復用性強。button button disabled button error button in progressprocessing.缺點 人為約定總是不靠譜，有人覆蓋了就呵呵噠。分治性強，復...