windows 使用npm安装webpack 4.0

最新推荐文章于 2025-05-14 19:32:40 发布

原创最新推荐文章于 2025-05-14 19:32:40 发布 · 8.4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#npm #webpack #windows #nodejs

前端框架搭建专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍NodeJS的安装步骤及验证方法，并演示如何通过命令行工具创建Webpack项目，包括安装Webpack及其CLI工具，设置npm脚本以启动Webpack。

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

1、安装NodeJS

首先需要安装nodejs点击如下链接

https://nodejs.org/en/download/点击打开链接

选择Windows Installer点击下载，下载完成之后点击安装包进行安装，

点击运行

点击next

点上√，然后点击Next

选择安装目录

点击change选择安装目录

将Fold name 改为d:\Program Files\nodejs\ 点击OK

点击Next

点击install

点击Finish，nodejs安装完成

使用win+r打开cmd窗口或者点击开始搜索cmd打开窗口

输入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

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

回到cmd窗口，输入 npm install --save-dev webpack

这时候使用 webpack -v 会出现'webpack' 不是内部或外部命令，也不是可运行的程序或批处理文件。

继续输入 npm install --save-dev webpack-cli

npm install --global webpack

npm install --global webpack-cli

使用webpack -v 出现版本号则安装成功

使用webpack 命令出现错误ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\Users\Administrator\Desktop\webpack-test'

错误原因是webpack入口默认为src/index.js 进入webpack-test文件夹新建文件夹 src，进入src文件新建index.js

在index.js中写入内容

alert("webapck test");

然后回到cmd窗口输入webpack

打包成功但是还有一个警告 WARNING in configuration The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.是因为使用webpack没有指定mode为 development（开发模式）或者为production（生产模式）

也可以在package.json文件中加入

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
},

最终package.json文件内容为

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "scripts": {
	  "dev": "webpack --mode development",
	  "build": "webpack --mode production"
  },
  
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.0.1",
    "webpack-cli": "^2.0.10"
  }
}

然后使用 npm run dev (相当于 webpack --mode development )或者

使用npm run build(相当于 webpack --mode production)

接下开看一下开发模式和生产模式的区别

我们首先看一下开发模式，回到cmd窗口输入 npm run dev

进入webpack-test文件夹，发现自动生成了一个dist文件夹，这是webpack默认输出文件位置

进入dist文件夹发现出现一个main.js 这是webpack默认输出的js文件

使用notepad++ 打开main.js 内容如下 js文件为正常开发时的格式

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId]) {
/******/ 			return installedModules[moduleId].exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			i: moduleId,
/******/ 			l: false,
/******/ 			exports: {}
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.l = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	} ......

然后看一下生产模式，回到cmd窗口输入 npm run build

进入webpack-test/dist，然后再打开main.js，发现内容格式非常紧凑，适合生产环境下使用

我们在webpack-test目录下新建一个index.html，引入main.js看是否可用

index.html内容为保存之后点击index.html使用浏览器打开

<!DOCTYPE html>
<html>
<head>
    <title>webpack-test</title>
    <script type="text/javascript" src="./dist/main.js"></script>
</head>
<body>
    
</body>
</html>

我使用的chrome浏览器打开效果为下图，说明index.js打包成功