麻瓜哇哇哇的博客

安装安装依赖 npm i eslint -D初始化eslint配置文件npx eslint --init输入该命令后，会让你选择一系列配置的，我选择的配置如下图所示：然后跟着提示一步步走，最终会生成一个.eslintrc的js文件，如下所示：默认rules的规则为空，可以自己自行添加.配置文件需要注意，想要生效需要在对应的编辑器里面安装eslint！！！我东拼西凑，写了个配置，如下所示：module.exports = { env: { br

今天写一个项目的配置文件，用了webpack 5，然后用webpack-dev-server启动时，竟然报了以下错误看到错误后，我就第一时间去看了官网，发现官网是用webpack serve，而不是像之前的用webpac-dev-server启动，于是我尝试在package.json修改之后，就成功的启动了项目。...

今天在接受之前的项目时，起项目报了这个错误然后就看了下他的配置文件，这个项目是用vue-cli2搭建的，主要引起错误的原因如下图所示：用了这种方式后，babel-polyfill与其他的插件造成了冲突，也就是说有两个地方都用到了babel-polyfill于是我的解决方案如下所示:第一步去掉配置文件的babel-polyfill entry: { app: './src/main.js', }第二步，在main.js加上以下代码if (!global..

最近自己在手动搭建博客，就自己配了一套webpack，但是在开发过程程中，遇到了这么一个问题，就是我配置了url-loader，但是还是打包报错，就是很纳闷，刚开始怀疑是路径的问题，loader解析不到，说以报错，可惜并不是，最终经过一系列鼓捣之后，终于终于发现了问题的所在，首先，先看下我的url-loader的配置 { test: /\.(png|gif|jpe?g)$/, use: {

今天在开发个人博客的时候，发现在.vue文件修改style标签里样式时，不会热替换，然后就去查了下webpack文档，文档给出的答案是：const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = { plugins: [ new MiniCssExtractPlugin({ // Options similar to the same options in webpackOpt

babel-loader用来处理ES6＋并将其编译成ES5，它使我们能够在工程中使用最新的语言特性（甚至在提案中），同时不必特别关注这些特性在不同平台的兼容问题。安装方式:npm i babel-loader @babel/core @babel/preset-env -Dbabel-loader：它是使Babel与webpack协同工作的模块@babel/core: 很明显，它是B...

针对webpack的模块打包原理，我们还是以实际例子来讲解，例子如下所示： // 入口文件 main.js import addContent from "./add-content"document.write("My first Webpack Demo!<br>")addContent()// add-content.jsexport default funct...

简介首先，需要重申下，webpack默认的源代码入口就是src/index.js，默认出口是/dist，默认配置文件是webpack.config.js，在实际开发中，存在生产环境和开发环境，而生产环境和开发环境对于配置的需求是不一样的，这时候我们一般就会建三个脚本，webpack.config.js用来放基本配置，webpack.prod.js用来放线上打包的配置，webpack.dev.js...

如果我们想根据webpack的配置文件中的mode变量更改行为。那么必须导出一个函数而不是一个对象:const path=require("path")const VueLoaderPlugin = require('vue-loader/lib/plugin')let config={ //入口 entry:"", //出口 output:{}, ...

path.resolve()path.resolve()方法会把一个路径或路径片段的序列解析为一个绝对路径。const a=path.resolve('/foo/bar', './baz');console.log(a);// '/foo/bar/baz'const b=path.resolve('/foo/bar', '/baz');console.log(b);// ...