webpack的安裝和配置

airborne007 發布于2019-08-22 16:03 / 648人閱讀

摘要：的配置問題一直很讓人頭疼，最近我也在學習，看著網上的教程，也想著把自己的學習過程寫下來。首先，配置需要先安裝，這是的官網鏈接描述記得需要以上的版本點開下載包，一路下去，然后我們的就安裝完成了，想卸載也可以再點擊一次這個安裝包來。

webpack的配置問題一直很讓人頭疼，最近我也在學習webpack，看著網上的教程，也想著把自己的學習過程寫下來。
首先，配置webpack需要先安裝nodejs，這是nodejs的官網鏈接描述記得需要node8以上的版本

點開下載包，一路next下去，然后我們的nodejs就安裝完成了，想卸載也可以再點擊一次這個安裝包來uninstall。

接下來是安裝webpack
打開cmd命令行，輸入

npm install webpack -g

系統就會自動下載安裝包 -g代表全局安裝
成功應該是如圖所示效果

接下來輸入

webpack --version

會有下圖的提示

提示我們需要webpack-cli
輸入

npm i -g webpack-cli

系統會自動給我們安裝webpack-cli
之后再輸入webapck --version，就會展示我們安裝的webpack的版本號了，如圖所示

這時候我們全局的webpack變量就安裝完啦！

接下來是如何使用webpack了
找到你的項目文件夾，shift+右鍵，在命令行中打開，此時的目錄就是當前目錄，然后我們輸入

npm init

就會如下圖所示，要你寫版本號等各種信息什么的，一路回車下去就是了

然后你會發現文件夾中多了一個package.json文件，
接下來在命令行中輸入

npm  install webpack --save-dev

-dev是表示開發環境的依賴，也可以取消掉dev這是生成環境的依賴
等待系統安裝完畢之后，就會發現在項目文件夾下多了一個node_modules文件夾，此時我們的項目目錄的webpack就安裝成功了，目錄結構入下圖所示

這是webapck的安裝流程，具體的配置流程我也寫了一篇文章鏈接描述，希望能幫到頭疼webpack的大家。

云服務器 GPU云服務器配置和安裝 lamp安裝和配置 hadoop安裝和配置 webpack安裝

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94009.html

gulp和webpack入門介紹

摘要：介紹說明的包管理器，用于插件管理包括安裝卸載管理依賴等使用安裝插件命令提示符執行插件名稱。總結安裝新建文件全局和本地安裝安裝插件新建文件通過命令提示符運行任務。 showImg(https://segmentfault.com/img/remote/1460000010873466); 前言眾所周知目前比較火的工具就是gulp和webpack，但webpack和gulp卻有所不同，本...

hsluoyz 2019-08-20 18:58 評論0 收藏0
前端構建_webpack

摘要：一個文件，一張圖片一個文件都是一個模塊，都能用導入模塊的語法的，的導入進來。自身只能讀懂類型的文件，其它的都不認識。 webpack 是什么？ webpack是一個前端模塊化打包工具指（由于模塊化開發，所以需要打包，這里所說的模塊化開發主要指JS) 由于現代前端應用程序越來越復雜，需要采用模塊化進行開發，但瀏覽器還未支持模塊化開發，所以webpack才誕生 webpack默認只支持js...

ethernet 2019-08-23 14:24 評論0 收藏0
webpak最全的簡單入門

摘要：了解什么是官方文檔是這樣介紹的點我了解官方文檔簡單的來說，可以看做是模塊打包機它做的事情是，分析你的項目結構，找到模塊以及其它的一些瀏覽器不能直接運行的拓展語言，等，并將其轉換和打包為合適的格式供瀏覽器使用。了解webpack 什么是webpack 官方文檔是這樣介紹的：點我了解官方文檔簡單的來說，WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結構，找到JavaSc...

FreeZinG 2019-08-26 10:46 評論0 收藏0
和webpack打個照面——安裝及配置

?webpack ?安裝命令行輸入 npm?install?webpack 配置文件?webpack.config.js moudule.exports?=?{ ??//Import?入口文件 ??entry:?./entry.js, ??//Output?dir?輸出目錄 ??output:?{ ????path:?,//當前目錄標識：__dirname ????filename:? ??} ...

stdying 2019-08-20 12:08 評論0 收藏0
webpack V3.X 入門指南(完)

摘要：通俗的說，預處理器用一種專門的編程語言，進行頁面樣式設計，然后再編譯成正常的文件，以供項目使用。在開發過程中，使用擴展名為的文件來編寫樣式 webpack 前言這篇文章是我在學習過程中對自己的一個記錄和總結，也希望可以幫助到和我當初同樣對webpack有困惑的小伙伴我在自學webpack時也參考了很多大神的文章，參考的帖子太多就不一一謝過了，再次感謝各位大神的幫助文章中的每個例...

Object 2019-08-21 17:23 評論0 收藏0