webpack
每一天,每一步
相信自己,你可以的
展开
-
在VSCode下运行webpack命令无效:无法将“webpack”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
VSCode下的默认终端是PowerShell,改成cmd。原创 2023-08-02 10:54:36 · 165 阅读 · 0 评论 -
Vue项目中查看所有的webpack、less-loader版本命令:npm view xxx versions
想要查看所有的webpack、less-loader版本使用下面的命令:npm view webpack versionsnpm view less-loader versions原创 2022-02-27 14:54:37 · 3609 阅读 · 0 评论 -
Failed to compile../src/views/sagc/component/EchartLine.vue?vue&type=script&lang=js& (./node_modul
问题产生:项目拉取运行后提示如下。Failed to compile../src/views/sagc/component/EchartLine.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./n原创 2021-11-29 21:00:00 · 5147 阅读 · 0 评论 -
Webpack5无法使用uglifyjs-webpack-plugin压缩js: ERESOLVE unable to resolve dependency tree
安装:npm i -D uglifyjs-webpack-plugin报错:npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR!npm ERR! Found: webpack@5.64.1npm ERR! node_modules/webpacknpm ERR! peer webpack@"4.x.x || 5.x.x" from @webpack-cli/configtest.原创 2021-11-19 21:30:00 · 4204 阅读 · 0 评论 -
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available
[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.原创 2021-11-19 21:00:00 · 990 阅读 · 0 评论 -
webpack5 url-loader打包图片资源大小与limit限制结合时,生成重复图片资源,页面也不能正常显示打包后的图片的问题的解决
目录:图片引用在./src/css/style.css中:background: url(../imgs/small.jpg) no-repeat;首先使用webpack5,打包./src/imgs中的小图片,大小为6.98KB,小于webpack.config.js中配置中limit的值,具体步骤如下:1. 安装url-loadernpm install url-loader --save-dev2.webpack.config.js中配置规则rules: [ .原创 2021-11-18 22:00:00 · 2667 阅读 · 0 评论 -
webpack异步加载ensure
功能:点击按钮1加载A.js,点击按钮2加载B.js。目录:index.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-wid.原创 2021-09-24 14:08:28 · 210 阅读 · 0 评论 -
minChunks、CommonsChunkPlugin在第三方库中抽离出自定义的公共组件
webpack.config.js:const path = require('path');const webpack = require('webpack');const packagejson = require('./package.json');module.exports = { // 入口文件 entry: { // 多入口 'main1': './src/main1.js', 'main2': './src/main2.js', // p原创 2021-09-24 09:18:07 · 283 阅读 · 0 评论 -
编译后的多入口文件中的第三方插件和webpack的抽离:使用CommonsChunkPlugin和runtime
webpack.config.js:const path = require('path');const webpack = require('webpack');const packagejson = require('./package.json');module.exports = { // 入口文件 entry: { // 多入口 'main1': './src/main1.js', 'main2': './src/main2.js', // p原创 2021-09-23 18:27:46 · 253 阅读 · 0 评论 -
webpack多入口文件的配置及输出
目录:common.js:export const common = '公共的文件';main1.js:import Vue from 'vue';import {common} from './common.js';console.log(Vue, 'main1${common}');main2.js:import Vue from 'vue';import { common } from './common.js';console.log(Vue, ...原创 2021-09-23 18:20:06 · 413 阅读 · 0 评论 -
webpack babel-loader转换es6+用到的库、插件及配置
安装babel-core、babel-loader、babel-preset-env、babel-plugin-transform-runtime:cnpm i babel-core@6.26.3 babel-loader@7.1.5 babel-preset-env@1.7.0 babel-plugin-transform-runtime@6.23.0 -Dbabel-core:Babel编译器的核心;babel-loader:用于webpack的一个loader,babel-core依赖.原创 2021-09-23 15:08:16 · 524 阅读 · 0 评论 -
webpack-dev-server的配置--open --hot --inline --port 3000 --progress:自动打开页面、热更新、自动刷新、默认端口号、运行进度输出到控制台
目录结构:根目录下index.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">.原创 2021-09-23 14:36:42 · 1907 阅读 · 0 评论 -
Vue单文件引入、webpack的配置及错误处理
1. 安装vue:cnpm i vue -S2. 安装vue-loader、vue-template-compiler:cnpm i vue-loader@14.1.1 vue-template-compiler@2.5.17 -D提示:peerDependencies WARNING vue-loader@14.1.1 requires a peer of css-loader@* but none was installed。按照提示安装css-loader及其依赖的style-l.原创 2021-09-23 16:27:28 · 1638 阅读 · 0 评论 -
接上一篇:webpack中html-webpack-plugin的使用及配置生成html
1. 安装html-webpack-plugin:cnpm i html-webpack-plugin@2.24.1 -D2. webpack.dev.config.js中配置:var path = require('path');// 引入html-webpack-pluginconst HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: { "main":原创 2021-09-20 21:43:55 · 293 阅读 · 0 评论 -
webpack中使用less-loader、less
项目目录:index.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><b..原创 2021-09-20 20:46:42 · 1853 阅读 · 0 评论 -
webpack打包url-loader和file-loader的使用及遇到的问题
App.js中引入图片:import imgSrc from './fengjing.jpg';// 注意单词不要拼写错误:fromvar app = { data() { return { imgSrc: imgSrc } }, template: ` <div> <img src="imgSrc" /> </div>原创 2021-09-20 18:18:50 · 543 阅读 · 0 评论 -
webpack中css-loader、style-loader的使用
项目目录结构如下:各文件源码如下:index.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></h.原创 2021-09-20 15:18:19 · 909 阅读 · 0 评论 -
webpack.config.js的配置及自定义配置文件
项目目录如下:一、webpack.config.js的配置首先,在项目目录下新建webpack.config.js文件:module.exports = { // 入口文件,一个或多个 entry: { // "main" 为自定义 "main": './main.js' }, // 出口文件 output: { filename: './build.js' }, // 文件监视改动原创 2021-09-20 14:50:23 · 2069 阅读 · 0 评论 -
webpack起步--Vue模块化打包js文件
1. 新建项目文件夹,并初始化:npm init -y(或:npm init --yes)2. 项目目录下安装webpack:npm install webpack@3.12.0 -D安装完成后,提示升级npm,根据提示命令进行了升级:To address issues that do not require attention, run: npm audit fixTo address all issues (including breaking changes..原创 2021-09-18 21:59:53 · 5450 阅读 · 0 评论 -
Vue项目安装webpack遇到的问题
查看webpack版本时报错:webpack -v:CLI for webpack must be installed. webpack-cli (https://github.com/webpack/webpack-cli)We will use "npm" to install the CLI via "npm install -D webpack-cli".Do you want to install 'webpack-cli' (yes/no):解决:1. 初始化np原创 2021-09-17 14:21:16 · 2338 阅读 · 0 评论