由於sdk中有對樣式的依賴,所以從rollup改為了webpack 配置,同時sdk 需要比較精簡,所以webpack的配置也是從簡單
遇到的問題
一 less和css module
由於sdk需要插入廣告模塊 所以必須保證類名不被污染,所以在插入時候需要用css module進行混淆
具體用法
1.1 安裝依賴
npm i style-loader css-loader less less-loader -D
1.2 配置webpack rules
配置時候遇到的問題 webpcak 是從后往前解析的,所以less-loader 要放到最后
具體使用
二 ExtractTextPlugin、less-loader css-loader css module
由於項目中用了css module 而且使用了less-loader css-loader等,所以在webpack配置中遇到了一些問題
最開始配置是這樣寫的
運行時總是拋出異常
最開始以為是配置的問題,仔細的查看了文檔,發現並不是這個的問題
最后發現實際上是因為ExtraTextPlugin 這個插件和webpack的版本不一致導致的,因為webpack的版本是4.40,而ExtraTextPlugin這個插件的版本直接npm i 是穩定版本3.2
所以需要升級ExtraTextPlugin 為最新的beat版本
npm install extract-text-webpack-plugin@next
至此,構建成功
三 css-module 配置
由於sdk 的廣告插入了很多樣式,所以在css-loader 引入了css module 來避免變量名的污染,但是同時考慮到因為是移動端的sdk,移動端所用的css布局都是不一致的
所以如果第三方引用的不是rem布局的話,支持reset樣式覆蓋也是可以的,css module 默認支持的是hash64的混淆,混淆后的類名特別長,所以想寫短點
異常報錯如下 Invalid options object. CSS Loader has been initialised using an options object that does not match the API schema.
翻了下文檔,以及github,發現css-loader 因為版本的更新已經不支持這樣直接寫入localIdentName
當前用的css-loader 是3.2
采用css-loader 最新官方文檔的寫法,將配置包裹進modules的object里 ,done https://www.npmjs.com/package/css-loader
四 打包時warning
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
這是由於webpack build 配置的時候沒有配置mode 模式
å