sayUonly的博客

解析html文件的时候，出现了“You may need an appropriate loader to handle this file type.”问题。意思是我需要添加一些loader来解析html，网上基本上的解决方案是用。最后，我决定还是回归本源问题，最好减少引入的插件。，配置的地方和文件都需要修改。重新运行一下，问题已经解决了。有冲突，导致html中的类似。的变量不能够正确解析了。这里的描述可以看出，

unplugin-auto-import的配置和eslint报错解决先上官网：unplugin-auto-importunplugin-auto-import 解决了vue3-hook、vue-router、useVue等多个第三方插件的自动导入，也支持自定义插件的自动导入，是一个功能强大的typescript支持工具。unplugin-auto-import常用的配置如下：AutoImport({ // 目标文件 include: [ /\.[tj]sx?$/, // .ts, .

为了方便调试，我研究了一下如何使用vscode进行断点调试。本次尝试已在html-template项目中测试通过。安装插件在vscode的插件商店安装必要的插件“Debugger for Chrome”。调整webpack配置在webpack.dev.config.js文件中，增加source map的配置。module.exports = webpackMerge.merge(webpackBase, { devtool: 'eval-source-map'});配置启动项点击“菜

在不同的开发环境下，需要使用不同的插件和配置项。为了方便开发，对不同的环境采用不同的配置文件。这里我简单地做了如下分类：{ // 开发环境，数据来源于mocker。 development: 'webpack.dev.config.js', // 测试环境，数据来源于后台数据库。 production: 'webpack.pro.config.js'}都是基于webpack.config.js进行扩展的。具体项目文件可参考html-template。更多的配置可以根据环境进行区分，可以

基于NPM和webpack的HTML页面开发无法使用import的方法引入mockjs来实现虚拟数据服务，因此这里将会采用webpack-api-mocker来实现效果。安装webpack-api-mocker是需要额外安装的。npm i webpack-api-mocker -D为了测试效果，我们这里使用axios进行数据通信。npm i axios -S运用创建mock.js文件。// mock.jsconst delay = require('webpack-api-mocker

由于项目拓展需要开发一些独立的页面，为了提升开发效率，所以搭建了NPM开发环境。amfe-flexible和postcss-pxtorem之前在Vue项目中经常使用。目的是不同大小屏幕下的页面自适应。这里我将这个方法引入到我的单个HTML页面开发中。这个文章是我个人开发的一个良好实践，基于我之前做的一个html开发模板html-template进行拓展的。安装首先安装重要的插件。amfe-flexible是用来计算根font-size。postcss-pxtorem是将css中的px单位转换为re

工作中有一些单独页面开发，为了节省开发和打包时间，所以稍微研究了一下基于sass/scss的多html页面的webpack配置。项目包在这里。初始化项目通过初始化创建package.json文件。npm init -y安装webpacknpm i webpack webpack-cli -D安装后在项目根目录创建webpack的配置文件webpack.config.js。文件配置内容会在后面做说明。为了简化工作流程，可以安装clean-webpack-plugin，每一次打包都是全新的开