Webpack 入门

发布于 2021-08-06 12:48:45 字数 1654 浏览 1284 评论 0

一、安装 webpack

安装 webpack 首先需要安装 node.js、node.js 自带了软件包管理工具 npm

1、查看自己的 node 版本

node -v

2、全局安装 webpack(这里先指定版本为 3.6.0,因为 vue cli2 依赖该版本)

npm install webpack@3.6.0 -g

3、局部安装 webpack(后续才需要)

--save-dev是开发时依赖,项目打包后不需要继续使用

4、为什么全局安装后,还需要局部安装呢?

在终端直接执行webpack命令,使用的是全局安装的webpack
当在package.json中定义了scripts时,其中包含了webpack命令,那么使用的是局部webpack

5、查看 webpack 版本

webpack -v

二、安装 vue-cli 脚手架

首先需要安装 node 和 webpack

1、安装

npm install -g @vue/cli

注意:上面安装的是VUE CLI3的版本,如果想按照Vue CLI2的方式初始化项目是不可以的。

2、查看版本

vue  --version

3、拉取 2.x 模版

npm install -g @vue/cli-init

//vue init 运行效果与vue-cli@2.x相同

4、Vue CLI2 初始化项目

vue init webpack my-project

5、Vue CLI3 初始化项目

vue create my-project

三、修改 npm 源

1、临时使用

在 npm install XXX 时加入--registry URL即可,不会影响到本地配置,如:
npm --registry https://registry.npm.taobao.org install express

2、持久使用

永久修改本地npm的配置
npm config set registry https://registry.npm.taobao.org

3、查看 npm 源地址有没有换成功

npm config get registry

4、重置为官方源

npm config set registry https://registry.npmjs.org/

四、vue-cli 3 与 2 版本有很大区别

vue-cli3 是基于 webpack4 打造,vue-cli2 还是 webpack3
vue-cli3 设计原则是“0配置”,移除了配置文件根目录下的 build 和 config 等目录
vue-cli3 提供了 vue-ui 命令,提供了可视化配置,加入人性化
移除了 static 文件夹,增加了 public 文件夹,并且 index.html 移动到 public 中

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
更多

推荐作者

沧笙踏歌

文章 0 评论 0

山田美奈子

文章 0 评论 0

佚名

文章 0 评论 0

岁月无声

文章 0 评论 0

暗藏城府

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文