随笔分类 -  webpack

解决 webpack-dev-server 不能使用 IP 访问
摘要：webpack 是众所周知很好用的打包工具，在开发 vue 项目时，vue-cli 就集成了 webpack。我们启一个服务：npm run dev然后在浏览器可是使用 http://localhost:8080 访问，但是当我们遇到移动端项目时，需要在手机端访问，所以要把 localhost 换成 阅读全文
posted @ 2020-07-13 23:00 年少的你如此美丽 阅读(1554) 评论(0) 推荐(0)
webpack css_module配置与使用
摘要：https://www.jianshu.com/p/0246794ac0c3 https://segmentfault.com/a/1190000015715538 1.在每个样式中都是style.*中的形式比较麻烦，可以使用react-css-modules解决这种问题。例如在app.js中 2. 阅读全文
posted @ 2020-05-14 00:26 年少的你如此美丽 阅读(2104) 评论(0) 推荐(0)
webpack项目轻松混用css module
摘要：前言 本文讲述css-loader开启css模块功能之后，如何与引用的npm包中样式文件不产生冲突。比如antd-mobilenpm包的引入。在不做特殊处理的前提下，样式文件将会被转译成css module。 一、产生问题的原因 { test: /\.css$/, use: [ 'style-loa 阅读全文
posted @ 2020-05-14 00:21 年少的你如此美丽 阅读(462) 评论(0) 推荐(0)
React+antd在线上动态更换皮肤主题
摘要：原理： 但官方提供的这种方式只能在编译时改变主题，无法在运行性动态切换。下面就是本文的重点，如何实现在运行时动态切换主题。 提取antd的less变量文件 我们的思路就是提取ant-design-vue中所有的less代码汇总到一个文件中，然后在index.html页面中直接引用，最后使用less. 阅读全文
posted @ 2020-05-13 22:45 年少的你如此美丽 阅读(5839) 评论(0) 推荐(0)
webpack中 less 注释报错
摘要：我之前是css-loader,less-loader,postcss-loader 一旦样式里有//的注释就报错 改成 css-loader,postcss-loader,less-loader 就好了 阅读全文
posted @ 2020-01-06 21:06 年少的你如此美丽 阅读(1089) 评论(0) 推荐(0)
Cannot assign to read only property 'exports' of object 解决办法
摘要：大致是说，在webpack打包的时候，可以在js文件中混用require和export。但是不能混用import 以及module.exports。 因为webpack 2中不允许混用import和module.exports, 解决办法有两种： 一、统一改成ES6的方式编写即可. 二、添加插件 n 阅读全文
posted @ 2019-12-30 23:02 年少的你如此美丽 阅读(2491) 评论(0) 推荐(0)
webpack 添加eslint代码审查
摘要：npm i --save-dev babel-eslintnpm i --save-dev eslint-loadernpm info "eslint-config-airbnb@latest" peerDependencies { eslint: '^5.16.0 || ^6.1.0', 'esl 阅读全文
posted @ 2019-10-21 22:48 年少的你如此美丽 阅读(748) 评论(0) 推荐(0)
详解webpack-dev-server的配置属性
摘要：1.devServer.contentBase 它指定了服务器资源的根目录，如果不写入contentBase的值，那么contentBase默认是项目的目录。 在上面例子中产生错误和后来解决错误的原因： 产生错误：因为bundle.js被"放在了"我们的项目根目录里，在dist/html里<scri 阅读全文
posted @ 2019-06-21 23:28 年少的你如此美丽 阅读(6058) 评论(0) 推荐(1)
理解webpack中的devTool的配置项
摘要：2.1. eval eval 会将每一个module模块，执行eval，执行后不会生成sourcemap文件，仅仅是在每一个模块后，增加sourceURL来关联模块处理前后对应的关系。在webpack中配置devtool: 'eval', 如下打包后的代码： 如上打包后的代码，每一个打包后的模块后面 阅读全文
posted @ 2019-06-21 23:00 年少的你如此美丽 阅读(9265) 评论(0) 推荐(1)
html-webpack-plugin详解
摘要：最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用： 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题 可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置 阅读全文
posted @ 2018-03-14 11:46 年少的你如此美丽 阅读(407) 评论(0) 推荐(0)