webpack 配置遇到的坑

由于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 模式 

    å