windows 使用npm安裝webpack 4.0

阿新 • • 發佈：2019-01-20

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打包成功

至此webpack安裝完成，至於後面應用配置還要更加繁瑣，根據個人需求可以在官方文件參考如何配置

https://webpack.js.org/guides/點選開啟連結

windows 使用npm安裝webpack 4.0

1、安裝NodeJS首先需要安裝nodejs點選如下連結https://nodejs.org/en/download/點選開啟連結選擇Windows Installer點選下載，下載完成之後點選安裝包進行安裝，點選執行點選next點上√，然後點選Next選擇安裝目錄點選cha

windows 使用npm安裝webpack 4.0以及配置問題的解決辦法

入口完成個人官方 npm安裝目錄繼續 dex The 輸入cmd點擊打開輸入node -v 出現nodejs版本號輸入npm -v 出現npm版本號則安裝npm安裝成功， 2、安裝webpack 桌面新建一個webpack-test文件夾，點擊進入

Windows下安裝PyTorch0.4.0

PyTorch簡介在2017年1月18日，facebook下的Torch7團隊宣佈PyTorch開源後就引來了劇烈的反響。PyTorch 是 Torch 在 Python 上的衍生版本。Torch 是一個使用 Lua 語言的神經網路庫, Torch 很好用

Windows系統安裝Redis 4.0

一、Redis 4.0 Windows安裝檔案下載下載地址：https://download.csdn.net/download/simple_bo/10753481 二、Redis 安裝安裝步驟如下：雙擊安裝檔案，點選next。這裡勾選上accept，點選next

Windows server 2008 .net 4.0環境的安裝

昨天同事將一個 ASP.NET 4.0 的網站安裝到客戶的 IIS6 主機上 (測試環境)，結果過程非常不順利，他們曾經一度覺得客戶的主機不知道經過幾隻手蹂躪過了（因為有好多人在共享 Administrator 賬號）進而產生排斥安裝在客戶主機以及 “為什麼我們要用 ASP.NET 4” 的感覺，不過在一群

在Windows 7環境下使用dos命令安裝.Net 4.0 及ISAPI和CGI限制配置

1.在Windows的menu搜尋框中輸入cmd並按回車鍵 2.出現cmd.exe後用滑鼠右鍵點選該圖示點選以管理員許可權執行調轉到dos視窗執行的結果如下 3.複製 cd C:\Windows\Microsoft.NET\Framework\v4.0.30319

安裝Elasticsearch5.4.0以及head,kibana插件

tar .org 以及 -a 通過註釋 enter 文件夾 .cn 一:下載Elasticsearch 地址:https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-5.0.0.tar.gz

多節點安裝redis cluster安裝部署-4.0.1

redis cluster 4.0 安裝、配置環境節點數量IP：172.17.7.11 CPU ：12 核 MEM:96G 啟動服務數量：6 使用端口：7001~12IP：172.17.7.25 CPU ：12 核 MEM:96G 啟動服務數量：6 使用端口：70

xp sp3安裝.Net 4.0提示嚴重錯誤，0x80070643，解決辦法2017版

完成防止結構 key framework regedit str 2014年關系客戶電腦上要裝金稅開票軟件，需要.net 4.0.30319.1，電腦環境是xp sp3，已經安裝了.net 2, .net 3.5sp1，安裝.net 4.0的時候提示錯誤0x8007

linux下安裝redis 4.0.2

rediswget http://download.redis.io/releases/redis-4.0.2.tar.gz解壓tar -xvf redis-4.0.2.tar.gz編譯cd redis-4.0.2make mkdir -p /usr/local/redismake PREFIX=/usr/l

centos6.8 安裝redis 4.0 搭建主從

entos 取數 cas ras isp role while tar.gz con centos6.8 安裝redis 4.0 搭建主從環境： master:172.17.165.245 slave :172.17.165.230 redis 版本:redis 4

webpack 4.0 配置方法以及錯誤解決

文件目錄 pts 版本創建目錄 efault ebp 大堆添加安裝選取一個空目錄來試驗全局安裝webpack4.1之後創建目錄 mkdir webpacktest && cd webpacktes 初始化package.json npm init

php 安裝redis 4.0 擴展

php一、下載軟件下載地址：http://pecl.php.net/package/redis 下載註意對應版本號二、安裝# tar -xf redis-4.0.0.tgz # cd redis-4.0.0/ Configuring for: PHP Api Version: 20100412

webpack 4.0嘗鮮

.com size cti webp 添加出口執行解釋速度發布不久得webpack 4.0據說速度快了68% - 98%，然後還支持沒配置文件，所以看起來很牛逼得樣子所以嘗試一發 webpack和webpack-cli分離現在執行webpack命令必須要we

centos7.3 安裝redis-4.0.7

jacentos7安裝redis-4.0.7 解壓 tar xvf redis-4.0.7.tar.gz -C /usr/local/src 編譯 cd /usr/local/src/redis-4.0.7/ make PREFIX=/usr/local/redis install 準備 mkdir /u

npm安裝webpack失敗（mac和window都可能會遇到這樣的情況，以下問題主要以mac為例）

我們 -c 描述全局內容 spa 安裝webpack 我想沒有　　　　問題描述：我想查看一下webpack的版本，於是輸入了命令webpack -v，結果如下圖所示：　　　　註：這裏提示我們要安裝webpack-cli，是因為到了webpack4， web

Linux 平臺安裝MongoDB 4.0（最新版）

文件格式 http rip 機制 selinux 新版要求錯誤平臺概述 MongoDB 是由C++語言編寫的，是一個基於分布式文件存儲的開源數據庫系統。在高負載的情況下，添加更多的節點，可以保證服務器性能。MongoDB 旨在為WEB應用提供可擴展的高性能數據

【深度學習】ubuntu16.04下安裝opencv3.4.0

form 線程 ubunt con sudo ive tbb 依賴包復制代碼１、首先安裝一些編譯工具＃　安裝編譯工具 sudo apt-get install build-essential ＃　安裝依賴包 sudo apt-get install cmake

菜鳥學資料庫——Windows 10安裝MySQL 8.0.12 解壓版

文章目錄下載解壓配置環境變數初始化安裝、啟動服務修改密碼結束下載下載地址解壓解壓到你想要的位置配置環境變數新建 MYSQL_HOME ，對應的值為你剛剛解壓的目錄，如

Linux 下安裝 QT5.4.0 Linux 下安裝 QT5.4.0

Linux 下安裝 QT5.4.0 一、安裝GCC4.8.2 curl -O ftp://ftp.gnu.org/gnu/gcc/gcc-4.8.2/gcc-4.8.2.tar.gz CentOS 6.6原始碼編譯升

windows 使用npm安裝webpack 4.0

相關推薦