webpack学习（一）

最新推荐文章于 2022-04-28 17:38:38 发布

何良语

最新推荐文章于 2022-04-28 17:38:38 发布

阅读量422

点赞数

分类专栏：前端自动化工具学习文章标签： webpack

本文链接：https://blog.youkuaiyun.com/sinat_39626276/article/details/79449804

版权

前端自动化工具学习专栏收录该内容

2 篇文章

订阅专栏

本文记录了学习webpack的过程，从创建项目文件夹、安装nvm、npm、node，到解决webpack安装问题，包括node版本要求，以及npm下载问题。通过设置淘宝镜像加速，安装webpack和webpack-cli，最终成功运行示例项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在学习使用webpack，所以写个博客记录一下，方便以后查阅

在安装webpack之前在电脑里新建一个webpack项目工程文件夹，然后在这个文件夹中打开命令行

要使用webpack，必须先安装配置好nvm，然后安装npm、node

在命令行中敲入这行代码,全局安装webpack

npm install -g webpack

输入命令行查看webpack是否安装成功：

webpack -v

使用这行命令时老是会输出一个webpack-cli的一个提示，在网上查了，说是不要安装4版本的webpack，也不知道为什么。。。然后安装了webpack 3.5.3版本，使用这条命令行就能查到webpack的版本了

npm install -g webpack@3.5.3
webpack -v

后来查了下，好像是因为node版本较低，webpack4最低支持node 6.11.5版本，而我的是6.11.2版本

查看现在已安装了node版本：

nvm ls

重新安装使用高版本的node，在官网查到目前官方认定的node最高版本是8.9.4，所以安装这个版本：

nvm install v8.9.4

nvm use 8.9.4

装了高版本的node后一直拒绝访问。。。打算重新装nvm，配置环境变量

重新安装nvm之后，安装node和nmp时，node安装成功，npm失败，原因是地址的问题，将其下载地址改为国内淘宝镜像，将原本下载的node手动删除，然好在setting.txt文件末尾添加以下两行文字：

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

然后重新下载就能下载了，node和npm都能正常使用。

然后进入到webpack：从前面的初始化npm，全局安装webpack

安装淘宝镜像（cnpm）：

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用淘宝镜像来安装资源更快。

重新安装webpack还是会提示webpack-cli，这个应该是webpack4新增的一个东西吧，实在是找不到，安装完这个之后webpack-v就能正常输出版本号了

局部安装webpack到这个文件夹下

npm install --save-dev webpack

然后可视文件夹下会看到多了一个文件夹和一个package.json文件，如下图所示：

然后创建一个index.html 和src/index.js

index.html的代码如下：

<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

index.js的代码如下：

function component() {
  var element = document.createElement('div');

  // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

然后保存，点击index.html就可以运行了，以下是运行的结果：