webpack使用过程中所遇到的相关问题

川长思鸟来 2023-07-17 07:05 15阅读 0赞

1.webpack runoob1.js -o bundle.js

2.webpack搭建出现的问题

webpack4.0.1安装问题

1、Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

解决办法：将loaders改为rules webpack版本问题

2、The CLI moved into a separate package: webpack-cli.

Please install 'webpack-cli' in addition to webpack itself to use the CLI.

\-> When using npm: npm install webpack-cli -D

\-> When using yarn: yarn add webpack-cli -D

解决办法：全局安装webpack-cli

npm install webpack-cli -g

3、DeprecationWarning: Tapable.plugin is deprecated. Use new API on \`.hooks\` instead

/usr/local/lib/node\_modules/webpack/lib/Chunk.js:460

解决办法：cnpm install [extract-text-webpack-plugin@next][extract-text-webpack-plugin_next]

4.安装babel:cnpm install --save-dev babel-loader babel-core

安装latest:cnpm install --save-dev babel-preset-latest

// query:\{

// //presets是告诉loaders怎么处理js,给不同的特性

// presets:\['latest'\]

// \}

"babel":\{

"presets":\["latest"\]

\},

5.如何优化打包时间：打包速度慢是因为babel-loaders上,babel-loaders非常耗时的语法转换，改善：使用exclude和include

6.绝对路径：const path = require('path');

//路径解析，\_\_dirname是在运行环境下的变量，也是在当前运行环境的路径，'./dist'相对路径，我带着当前的环境，当前的目录，再给一个相对路径，然后解析完以后就可以得到一个绝对路径

path: path.resolve(\_\_dirname, './dist'),

7.安装css,style

解决浏览器兼容为css添加前缀postcss-loader:

安装：cnpm install postcss-loader --save-dev

加浏览器前缀安装：cnpm install autoprefixer --save-dev

8.loader:'style-loader!css-loader!postcss-loader'

使用@import引入的样式设置,importLoaders表示cssloader之后指定几个数量的loader来处理import进来的资源

loader:'style-loader!css-loader?importLoaders=1!postcss-loader'

9.处理less,sass

安装npm install less-loader --save-dev

缺失less时安装less:npm i less

loader的处理方式是从右到左

10.处理模板文件的几种做法：（模板语法，模板引擎）

安装：npm install html-loader --save-dev

1.使webpack将模板文件当做字符串处理

2.把模板文件当成已经编译好的模板的处理函数

11.安装ejs-loader:npm install ejs-loader --save-dev

比较流行的loader:jsx,ractive

12.处理项目中的图片文件分几种情况：

1.可能css里面有很多背景图片

2.模板文件结构中直接引用图片

3.最根部的Html文件也会对图片文件进行引用

方法一(fill-loader):

安装：npm install fill-loader --save-dev

绝对路径的文件无论背景还是模板都会被处理

改变图片打包后的输出地址：query:\{

name:'assets/\[name\]-\[hash:5\].\[ext\]'

\}

方法二（url-loader):

安装：npm install url-loader --save-dev

类似file-loader，但是它可以指定一个参数limit,可处理图片和文件，当图片或文件的大小大于指定的limit后，它会直接丢给file-loader去处理，当小于设定的大小限制时它会把图片和文件转为...，就不再是一个url,直接变成一段编码

两种方法各有优劣：通过http请求载入过来的图片可以使浏览器享受到一个优势，就是图片的缓存，当图片的重复性非常高的时候，通过使用httpRequest会给访问增加一些缓存的便利，如果是通过baseduse载入图片，相当于只要在任何一个地方引用到这个图片的时候，那个地方都会一份同样大小的baseduse的编码存在，从某种程度上来说，会导致代码的一些冗余，会增加代码的体积，通过url-loader将小于一定大小的图片变成代码后，对于一些http请求的文件应该如何压缩，可以用到image-webpack-loader

安装image-loader:npm install image-webpack-loader --save-dev

[extract-text-webpack-plugin_next]: mailto:extract-text-webpack-plugin@next

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关初学webpack，所遇问题

我学习看的视频是比较旧的视频，导致跟着学的时候，就会出现一系列问题；因为你刚开始安装的可能并不是新的版本，这样会导致版本不兼容的问题 1. ERROR in ./src/

约定不等于承诺〃/ 2024年03月24日 20:22/ 0 赞/ 51 阅读

相关 Nginx使用过程中遇到的相关问题

1、nginx.id文件丢失的问题? 解决办法： ①在你的Nginx安装目录下，找到 `conf/nginx.conf` (或者conf/nginx.conf.defa

古城微笑少年丶/ 2023年10月08日 08:19/ 0 赞/ 63 阅读

相关 webpack使用过程中所遇到的相关问题

1.webpack runoob1.js -o bundle.js 2.webpack搭建出现的问题 webpack4.0.1安装问题 1、Invalid configu

川长思鸟来/ 2023年07月17日 07:05/ 0 赞/ 16 阅读

相关开关量使用过程中遇到的问题

A端一对开入量串接在24V直流线路中，正确接法是 B端一对开出（常开触点），接到A端开入上，初始态保持开路。 ![watermark_type_ZmFuZ

àì夳堔傛蜴生んèń/ 2023年01月22日 06:52/ 0 赞/ 60 阅读

相关升级webpack5过程中遇到的坑

将项目的weback从3升到了5，遇到了一系列的问题，这里记录两个： 1. extract-text-webpack-plugin兼容问题 2. webpack-dev-

忘是亡心i/ 2022年10月27日 15:49/ 0 赞/ 500 阅读

相关 WebAppRootListener使用的过程中遇到的问题

首先，先简述一下遇到的问题，在程序中看到了这样的一段代码： String cmsRoot = System.getProperty(rootKey); 查看了

素颜马尾好姑娘i/ 2022年07月12日 16:45/ 0 赞/ 368 阅读

相关使用vue-datepicker过程中遇到的一些问题

在做vue项目中，少不了使用外部vue组件，今天在项目中使用awesome-vue中的vue-datepicker的时候，遇到了一些问题，花了一些时间终于解决了，现在给大家分享

男娘i/ 2022年05月25日 09:10/ 0 赞/ 608 阅读

相关 AWS使用过程中遇到的问题

RDS连接不上数据库的排除办法检查RDS的安全组。初次尝试，数据库连不上；后面又重试着不使用默认的安全组进行配置，可以连上。这里有一个检测是否可以成功连接的命令，如果连

淩亂°似流年/ 2022年04月13日 08:44/ 0 赞/ 547 阅读

相关 Kettle使用过程中遇到的问题（持续更新）

一、Oracle相关问题 1、连接Oracle报错（暂未解决） IO错误：远程主机强迫关闭了一个现有的连接，authentication lapse 0 ms !

谁践踏了优雅/ 2021年09月23日 12:04/ 0 赞/ 1422 阅读

相关 UITableView使用过程中可能遇到的问题

前言：记录一些UITableView使用过程中可能遇到的问题环境：Xcode9 解决UITableViewStyleGrouped类型的TableView的cell...

你的名字/ 2021年03月26日 14:53/ 0 赞/ 774 阅读