博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Webpack【1】 入门
阅读量:7207 次
发布时间:2019-06-29

本文共 969 字,大约阅读时间需要 3 分钟。

做了好久网页,从来没有打过包,别人的代码都是?v=12145

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。

在安装 Webpack 前,你本地环境需要支持 。

这个文章作者最终就是做到打包一个js

首先把这篇文章的内容全部根据自己的环境复原

 

 

1. webpack的打包示意图理解:

 

 

2. 前期准备

  • 安装node

 

  • 新建出目录:D:\note\webpack\webpack_test

 

3. 安装并使用webpack

(1)在命令行下进入文件夹:webpack_test中,并初始化:

 

这里我就跟原作者不一样,原文作者是这样的

我读了一下,我的是说我文件中没有package.json,我的目录是什么鬼

我的目录中有这这个文件package-lock.json

 

好吧重新按照作者的思路来,首先全局安装一个webpack

npm install webpack -g

然后回到这个文件夹

 

然而还是一样,根据博主的动作还是会做出这样的结果

 

后来才发现,输入完npm init命令之后,程序想要你给他一些配置,但这些配置也可以不需要,一直回车就可以,最后输入yes,然后目录下面就有package.json文件了。也是没有仔细看命令返回的英文。

 

解决完这个思路之后再跟着原文作者思路来

 

(2) 在当前文件中安装webpack

然后这次好像就真的成功了。

(3) 在webpack_test目录下,新建文件:hello.js

function hello(){

console.log("hello, this is Cynthia !"); }

(4) 用webpack将hello.js文件打包成hello.buddle.js文件:

这里又出问题了,我的结果是这样的

中间让我安装webpack-cli,我输入yes让安装,结果安装失败

后来百度知道,这个玩意儿要全局安装,命令是

然后无奈的发现又出现了一个新问题

我百度了一大顿,没有百度到解决方案,我回来看命令的返回,说是动不了要生成的文件,我觉得可能是权限问题,用超级管理员打开命令行,结果还是不行,跪求指导

转载于:https://www.cnblogs.com/mihe/p/9815959.html

你可能感兴趣的文章
[数据库]SQL Server 用户NT AUTHORITY\IUSR 登录失败
查看>>
轻松学会多线程(四)——synchronized同步keyword知多少
查看>>
Apache Kylin 部署之不完全指南
查看>>
php中将SimpleXMLElement Object数组转化为普通数组
查看>>
docker学习(7) docker-compose使用示例
查看>>
Android 推断当前Activity是不是最后一个Activity 以及 应用或Activity是否存在
查看>>
【Android】6.3 ProgressDialog
查看>>
设计模式六大原则——迪米特法则(LoD)
查看>>
HtmlAgilityPack 之 HtmlNode类
查看>>
[转]Java Web基础——Action+Service +Dao三层的功能划分
查看>>
ngx.location.capture 只支持相对路径,不能用绝对路径
查看>>
自己在OC考试中的试题
查看>>
向 Git 服务器添加 SSH 公钥
查看>>
Lua学习笔记5:类及继承的实现
查看>>
Vagrant工具
查看>>
如何使用 Android Studio 的 git hub 功能
查看>>
UML应用:业务内涵的分析抽象&表达
查看>>
eclipse菜单解释及中英对照《二》
查看>>
模拟易企秀
查看>>
CDOJ 1401 谭爷的黑暗沙拉 数学
查看>>