webpack小试牛刀

2023-11-06 07:00
文章标签 webpack 小试牛刀

本文主要是介绍webpack小试牛刀,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

根据菜鸟教程上的一篇文章进行学习和练习webpack打包,想不到,还真遇到不少问题
https://www.runoob.com/w3cnote/webpack-tutorial.html

问题1:cnpm install webpack -g以后,使用 webpack 命令来打包:webpack runoob1.js bundle.js,提示缺少webpack-cli,安装以后发现,
webpack-cli文件提示
E:\webpack\node_modules\webpack-cli\bin\cli.js:74
throw err;
^
Error: Cannot find module 'webpack'
(骂街第一次)
百度了一下,是webpack版本引起的,webpack3里,webpack和webpack-cli是放在一起的,webpack4把两者分开放了。
so,只能对webpack进行降级:
a,先删除webpack:cnpm uninstall webpack -g
b,安装制定版本的webpack: cnpm install webpack@3.3.0 -g(为啥是3.3.0,纯属瞎编)

你以为到这里就可以打包成功了吗?too young too simple...
继续webpack runoob1.js bundle.js,然后回车,你猜,怎么着,,,离成功很近,但是还是报错了:
PS E:\webpack> webpack runoob1.js bundle.js
Hash: 3aea6d8a27453c0be041
Version: webpack 3.3.0
Time: 19ms
ERROR in Entry module not found: Error: Can't resolve 'runoob1.js' in 'E:\webpack'
(骂街第二次)骂街回来以后,开始深思:这个报错又是为啥呢?
又百度了一下,有人说是webpack.config.js里的文件

那么问题又来了,webpack.config.js文件找不到啊,我只是新建了一个文件夹而已啊。。
搜了整个c盘都没有找到,好吧,我先放弃一下下,然后看了另外一篇帖子:
http://www.codes51.com/itwd/4532647.html
解决方案有两个,第一个又要安装,不想安装了,看下第二个,这个简单。
试了下第二个,完美解决!附上截图~

 

 

转载于:https://www.cnblogs.com/new-dream-new-hope/p/10853676.html

这篇关于webpack小试牛刀的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/355136

相关文章

MutationObserver小试牛刀

参考文档 https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver 简介 MutationObserver 接口提供了监视对 DOM 树所做更改的能力。 MutationObserver() 构造函数——是 MutationObserver 接口内容的一部分——创建并返回一个新的观察器,它会在触发指定 DOM 事件时,

vue-cli webpack在node环境下安装使用

第一步,需要下载并安装node.js以及他的npm组件;   第二步,用node -v;npm -v来测试node.js以及npm是否安装成功(建议用GIT命令行工具,因为GIT是linux系统),如果显示出它的版本,说明已经安装成功,如下图;   第三步,下载vue-cli,在命令行中输入npm install -g vue-cli,自动下载vue-cli(会生成一大堆的依

webpack-AST剖析

webpack-AST 目录 文章目录 前言推荐阅读拆解函数`AST`工具 - `recast`制作模具 - `recast.types.builders`如何改装 实战 - 命令行修改`js`文件`recast.visit` - `AST`节点遍历`TNT` - 判断`AST`对象类型`AST`修改源码,导出全部方法`Builder`实现一个箭头函数 `exportific`前端工具使用

webpack-模块热替换剖析

webpack-模块热替换剖析 目录 文章目录 前言推荐阅读前提`HMR`应用开启`HMR`开启`webpack-dev-server`的`HMR`手动添加代码 `HMR`原理步骤 前言 主要讲解热更新的原理 推荐阅读 《webpack实战 入门、进阶与调优》 前提 早期调试代码基本都是 改代码 - 刷新网页 - 查看 - 修改代码第一次提升效率:工具检测到代码改动

webpack处理css

在神奇的babel中我们提到了babel-loder的使用,那么webpack声称可以处理任何类型的文件,css该怎么处理呢,好,我们来走一遍 首先介绍下style-loader和css-loader,因为处理css文件之前必须要安装这两个模块,至于这俩是从哪冒出来的,请看点击打开链接,这里详细介绍了各种loader的使用场景。 npm install css-loader style-l

webpack的文件监听实现(热更新)

注意:安装之前,先保证webpack项目能正常运行! 目录 前言1 第一种方式, --watch1.1 配置package.json1.2 到控制台输入 npm run watch1.3 修改文件,保存后,会自动打包,到浏览器刷新,才能看到变化。1.4 文件监听的原理理分析 2 第二种方式,在配置 webpack.config.js 中设置 watch: true(热更新:webpack-

webpack解析字体,file-loader

注意:安装之前,先保证webpack项目能正常运行! 因为字体和图片都不是代码文件,所以,都可以使用file-loader 1.安装 file-loader 依赖 cnpm i file-loader -D 2.在src目录下创建font文件夹,并引入字体 (这里引入AdobeGothicStd-Bold.otf.otf ) 3.配置,在 webpack.config.js 下新增配置:

webpack解析css, less,scss

注意:安装之前,先保证webpack项目能正常运行!   1.安装依赖 npm install style-loader css-loader -D npm install less less-loader -D   2.配置,在 webpack.json.js 下,新增规则: module.exports = {// ...module:{rules:[// ...// 新增cs

webpack解析React JSX

1.安装 cnpm i react react-dom @babel/preset-react -D 2.在 .babelrc 文件下,增加配置: {"presets": ["@babel/preset-env","@babel/preset-react" // 新增 react 配置]}

webpack解析ES6

注意:安装之前,先保证webpack项目能正常运行! 1.安装 npm i @babel/core @babel/preset-env babel-loader -D   2.在src目录下,创建 .bebalrc 文件,并配置: {"presets": ["@babel/preset-env"]} 3.修改 webpack.config.js 配置: module.exports