练习webpack遇到的一些问题以及解决办法,供自己以后参考

1、利用nodeJs安装webpack时报出以下错误提示:

这个错误我在网上搜了一下,说是npm文件配置问题,也就是权限不够

解决办法:npm config set registry http://registry.npmjs.org/  运行这行命令即可

2、自动监听文件变化

webpack中可以利用webpack-dev-server在localhost:8080端口启动一个express静态资源web服务器,并且默认以监听模式自动运行webpack,实时监听文件的变化;

首先安装:npm install webpack-dev-server -g

然后运行:webpack-dev-server --progress --colors

注:--progress 显示编译进度条  --colors带颜色的进度条

3、webpack文件分析

webpack的配置文件是:webpack.config.js

webpack的插件文件是:webpack.plugin.js

如图:

这就是wenpack.config.js的基本结构

未完待续、、、、、、

时间: 2024-07-29 06:53:44

练习webpack遇到的一些问题以及解决办法,供自己以后参考的相关文章

windows 使用npm安装webpack 4.0以及配置问题的解决办法

输入cmd点击打开 输入node -v 出现nodejs版本号 输入npm -v 出现npm版本号则安装npm安装成功, 2.安装webpack 桌面新建一个webpack-test文件夹,点击进入文件webpack-test夹 按下shift+鼠标右键  点击在此处打开命令窗口 输入npm init 一直点击回车键 当出现Is this ok?时 输入yes,然后点击回车键 进入webpack-test文件夹,出现package.json文件 使用notepad++打开package.json

儿童挑食的原因和解决办法

为了保证孩子生长发育充足的营养,爸妈开始为宝宝追加营养.但是总有些“熊孩子”这也不吃那也不吃,满屋子追着喂饭,到底宝宝为什么挑食,怎样才能改变这种不良习惯呢?据南京市妇幼保健院儿保科李悦医生介绍,挑食影响了宝宝的营养摄入.体格智能发育,这让家长很是焦虑.聪明的家长应该学着去了解分析宝宝挑食的原因,并寻求解决方法. 以下介绍了几种宝宝存在的挑食原因,并提供了一些解决方法供家长们参考. 挑食原因1:有些宝宝对一些食物的气味.口感.质地非常敏感,总是拒绝或难以接受某一类食物.这种行为会导致宝宝辅食摄入

webpack无法使用相对路径解决办法

webpack无法使用相对路径: 当配置完webpack.config.js,path使用相对路径,如下: 但是,在cmd运行 webpack 时,报如下错误: 所以,解决办法: var path = require('path'); path: path.resolve(__dirname, './bin')

用vue-cli创建的项目没有webpack相关文件的解决办法

第一次使用vue-cli,版本是@vue/[email protected],按照官网上的教程: vue create my-project 发现生成的项目并没有webpack相关的文件, 也就是说没有集成webpack 解决办法是先: npm install -g @vue/cli-init 然后: vue init webpack my-project 这样生成的vue-cli项目就有webpack配置文件了 原文地址:https://www.cnblogs.com/xianxiaobo/p

当node升级后导致webpack打包出错,node-saas出问题的解决办法

报错信息如下: ERROR in ./node_modules/[email protected]@extract-text-webpack-plugin/dist/loader.js?{"omit":1,"remove":true}!D:/work/nl_web/node_modules/[email protected]@vue-style-loader!D:/work/nl_web/node_modules/[email protected]@css-load

使用webpack命令打包时,报错TypeError: Cannot read property 'presetToOptions' of undefined的解决办法

我只安装了webpack,没有安装webpack-cli,第一次输入webpack打包时,提示 One CLI for webpack must be installed. These are recommended choices, delivered as separate packages: - webpack-cli (https://github.com/webpack/webpack-cli) The original webpack full-featured CLI. We wi

Laravel5.5执行 npm run dev时报错,提示cross-env找不到(not found)的解决办法

Laravel 5.4 Mix & Laravel5.5执行 npm run dev时报错,提示cross-env找不到(not found)的解决办法 首先进入package.json文件,将scripts下的所有cross-env删除掉,(devDependencies下的不能删除)处理结果代码如下: { "private": true, "scripts": { "dev": "npm run development&qu

vue-cli Uncaught SyntaxError: Use of const in strict mode解决办法

vue-cli初始化项目,开发环境运行项目使用了webpack-dev-server,而最新版本[email protected]运行项目时,并不能成功的把es6语法转化为es5,所以在不支持es6的移动端浏览器中会报错例如钉钉.UC浏览器等: Uncaught SyntaxError: Use of const in strict mode 解决办法: 将webpack-dev-server版本降为2.7.1重新安装即可 亲测有效. 参考:https://github.com/vuejs-te

使用Hbuiler新建vue项目的时候错误信息及解决办法

新建项目后出现 miss script :dev 错误 找了很多原因一直没有发现问题 原因是packge.json文件中丢失一些数据依赖,重新下载过来 安装一下就可以了 解决办法: 输入 vue init webpack  npm install  npm run dev  问题就解决了. 原文地址:https://www.cnblogs.com/agen-su/p/11387441.html