webpack
sxs7970
这个作者很懒,什么都没留下…
展开
-
vue项目打包文件chunk-vendors过大优化以及其他的优化方案
直接看我看过的吧点击 这个比较多点击2 这个直接配置点击3 关于一个webpack版本的报错,我用的是webpack@^4.23.0 的,某些新版本的库要求 webpack@5,更新依赖时,根据依赖选择的规则,就以 webpack@5 作为主依赖安装。然而 @vue/cli 依赖 webpack@4,它自带的 webpack 配置无法兼容 webpack@5 ,于是就报错,不能继续编译。点击4 关于Cannot read property ‘tapPromise‘ of undefine.原创 2021-09-29 10:21:46 · 1142 阅读 · 2 评论 -
webpack打包图片的时候,发现图片的src的值是[object Moudle]的值
在打包xxx.html中的img的时候,需要通过html-loader进行处理,如果不用则xxx.html中的img不会被打包,这个loader的作用就是,负责引入img,从而能被url-loader进行处理问题:html-loader引入图片是以commonjs(node的),而url-loader默认是以es6模块化解析,所以导致出错解决:需要在进行图片处理的loader中进行处理rules:[{test:/\.(png|jpg|gih)$/,loader:'url-loade.原创 2021-07-23 17:56:51 · 115 阅读 · 0 评论 -
webpack@4.31.0版本打包报错: Can't resolve 'build.js' in 'E:\CodeWeb\
在 webpack4.x 以前的版本,一个普通的打包命令就是 webpack ./main.js .build.js ,./main.js表示你要打包的文件,./build.js表示你要打包出来文件(自己命名)。以上是老版本打包webpack@4.x以上版本如果打包出现错误:Error: Can't resolve 'build.js' in 'E:\CodeWeb\...... ,首...原创 2019-07-20 21:50:21 · 602 阅读 · 0 评论 -
webpack4.x配置 babel版本7.x 配置 React【踩坑】
文章目录1、babel-loader7.x 与 babel6.x 版本配置2、babel-loader8.x 与 babel7.x 版本配置babel-loader7.x 一定要与 babel6.x 他们两个版本结合用babel-loader8.x 一定要与 babel7.x 他们两个版本结合用1、babel-loader7.x 与 babel6.x 版本配置如果你的babe...原创 2019-05-10 10:57:29 · 1424 阅读 · 1 评论 -
webpack4.x搭建项目基本步骤
文章目录准备工作配置 webpack-config.js 文件webpack-dev-server 的配置和功能html-webpack-plugin 的配置和功能webpack4.x 版本搭建项目 基本跟 webpack3.x 版本一样,只不过 webpack4.x有自己的特性,接下来借用4.x版本,详细的说一下搭建整个项目的步骤:准备工作首先 创建一个项目根目录,然后初始化一下项目...原创 2019-05-09 19:09:20 · 507 阅读 · 0 评论 -
MUI scroll顶部滑动条问题
在使用webpack打包时,使用Vue和MUI 中的 scroll 和 Tabbar 的时候会出现一些坑!!!6坑以及解决6坑的方法:制作滑动条,不想自己写,想找模板,就用 MUI 中的 tab-top-webview-main.html当 html 样式引过来的时候,有一个类必须去掉,要不然他会覆盖整个屏幕,所以需要把 slider区域 的 mui-fullscreen 删除掉。上边...原创 2019-04-01 18:18:10 · 1004 阅读 · 1 评论 -
webpack处理(处理css/less/scss/url(图片)/字体文件)
注意:webpack 默认只能打包处理 JS 类型的文件,无法处理其他的非 JS 类型的文件;如果要处理 非 JS 类型的文件,我们需要手动去安装一些 合适的 第三方 loader 加载器;1.如果想要打包处理 css 文件,需要安装 npm i style-loader css-loader -D2.打开webpack.config.js 这个配置文件,在里边,有一个 配置节点,就是 m...原创 2019-03-23 21:31:42 · 1811 阅读 · 0 评论 -
export default 和 export 的使用方式
在 ES6 中 通过规范的形式,有 导入 和 导出 模块在 ES6 中导入模块:使用 import 模块名称 from "模块标识符" 和 import "表示路径"在 ES6 中向外暴露成员:使用 export default 和 export在 Node 中,使用 var 名称 = require("模块标识符") 导入使用 module.export = {} 和 e...原创 2019-03-26 23:02:13 · 548 阅读 · 0 评论 -
webpack中使用Vue结合render函数渲染指定的组件
步骤:安装 vue 的包:cnpm i vue -S由于在webpack 中,推荐使用 .vue 这个组件模板文件定义组件,所以,需要安装 能解析这种文件 的 loader cnpm i vue-loader vue-template-compiler -D在 main.js 中,导入 vue 模块 import Vue from 'vue'在根目录下定义一个 .vue 结尾的组件,...原创 2019-03-26 18:26:35 · 1447 阅读 · 0 评论 -
webpack-dev-server配置
webpack-dev-server 有两种参数配置方法。配置方法一:第一种比较简单,也是常用的一种。在我们的根目录下,有一个 package.json 的文件,我们在这个文件可以进行配置: "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "web...原创 2019-03-23 16:22:41 · 644 阅读 · 0 评论 -
解决报错Cannot find module 'webpack-cli/bin/config-yargs'
npm i webpack-dev-server -D 把这个工具安装到项目本地开发依赖安装完成后,执行命令npm run dev 发现报错: Error: Cannot find module 'webpack-cli/bin/config-yargs’后来查看一些资料,发现,webpack3.x的版本与webpack-dev-server3.x 的版本不兼容。在package.js...原创 2019-03-22 17:45:59 · 81358 阅读 · 10 评论 -
webpack配置文件:webpack.config.js
webpack的配置文件webpack.config.js在项目根目录下创建webpack.config.js文件代码及注释如下:const path = require('path');//这个配置文件,其实就是一个 JS 文件,通过 Node 中的模块操作,向外暴露一个 配置对象module.exports = { // 在配置文件中,需要手动指定 入口 和 出口 ...原创 2019-03-22 16:56:28 · 773 阅读 · 0 评论 -
webpack中导入vue和普通网页中导入vue的区别
普通页面导入Vue安装 vue 运行依赖cnpm i vue -S在 HTML 页面中,引入 script 标签在页面中创建一个 div容器创建一个 Vue 实例在webpack 中导入Vue在 webpack 中,在入口文件中,使用 import Vue from 'vue';导入的Vue构造函数,功能不完整,只提供了 runtime-only 的方式,并没有提供 像网页中...原创 2019-03-25 22:36:55 · 612 阅读 · 0 评论 -
解决:Error: Cannot find module 'webpack'
最近在用webpack打包的时候,遇见一个很恶心的东西,用的时候,出现 Error: Cannot find module ‘webpack’输入npm init -y 初始一下项目,然后生成默认配置文件package.json文件。在打包入口文件的时候,将 ‘.\src\main.js’ 打包成 ‘.\dist\bundle.js’ 的时候,出现Error: Cannot find mod...原创 2019-03-22 11:35:51 · 8947 阅读 · 1 评论 -
Cannot find module '@babel/core'
ES6利用第三方loader 把高级语法转换成低级语法遇见得问题在使用 webpack 打包文件的时候,用到了ES6的一些语法。打包编译时出错,因为webpack只能默认处理一部分ES6语法,更高级的语法 webpack处理不了,所以只能借助第三方loader 帮助webpack 进行处理。所有的配置准备工作都准备好了,运行的时候发现出现Error: Cannot find module ...原创 2019-03-25 18:04:45 · 2417 阅读 · 0 评论 -
Babel编译js(可以把es高级语法 转换为 低级语法)
文章目录webapck 打包ES6高级语法的时候出现的问题Babel 可以把 高级语法 转变为 低级语法步骤:在ES6中,提供新语法,用 class 关键字,是实现 面型对象变成的方式:// class 关键字,是ES6中提供的新语法,是用来 使用 ES6 中面向对象编程的方式class Person { // static 静态的。 // 使用 static 关键字,可以...原创 2019-03-25 17:43:09 · 838 阅读 · 0 评论