zoukankan      html  css  js  c++  java
  • 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 模式 

        å

    吾生有涯 而知也无涯矣
  • 相关阅读:
    20.multi_case04
    Linux 性能监测:Memory
    Linux 性能监测:介绍
    Linux 性能监测:CPU
    服务器压力上不去原因分析
    Oracle数据库shutdown immediate被hang住的几个原因
    性能测试需求指标分析方法
    关于spotlight for Windows和spotlight for oracle的使用
    Oracle性能监控脚本(sql)
    Oracle 常用性能监控SQL语句
  • 原文地址:https://www.cnblogs.com/Sherlock09/p/11550258.html
Copyright © 2011-2022 走看看