Webpack4-基本使用
這里不對Webpack進行過多的介紹，請執行百度！
?使用Webpack需要安裝Node.js運行環境（下一步下一步即可）
https://nodejs.org/en/?
?
安裝nrm（使用nrm可以切換Node.js安裝包時的鏡像源，這樣可以提高我們安裝工具的速度）
打開Node.js的命令窗口,使用以下的命令進行安裝操作npm i nrm -g (-g代表的是全局安裝)
安裝完成以后可以使用以下的命令進行相關的操作
nrm ls (查看nrm支持的鏡像源列表) ?nrm use cnpm (代表將鏡像源切換到cnpm,前面有個星號就代表當前所使用的鏡像源)
?安裝webpack（webpack最近的版本已經出到4.2版本，在個別的用法上已經和之前的3版本不一樣了）
?安裝webpack需要安裝三樣東西：?webpack，webpack-cli，webpack-dev-server。這里一個個來安裝，安裝到哪個就介紹哪個。
1.安裝webpack (webpack本身就是一個工具,所以要先裝它,另外幾個工具都是建立在它的基礎之上的)npm i webpack -g （全局安裝webpack,這里可能有個小坑,在你項目中使用到webpack的時候可能會提示說找不到webpack這個模塊,需要在項目目錄下在安裝一次,這里大家可以不全局安裝的話還是不要全局安裝的好！）
2.安裝webpack-cli (webpack-cli 是webpack4版本以后需要安裝的一個工具，不安裝的話在使用時候會報錯)
npm install webpack-cli -g
那么這兩個工具安裝完成以后就可以使用webpack了！
?
那么我們可以創建一個項目來感受一下webpack的魅力所在，這里我創建的是一個叫webpac-study2的文件夾，在該文件夾下還創建了一個src文件夾！
?我把所有的靜態資源和頁面都會放在這個src目錄下，目錄創建好后我們使用相應的命令來初始化項目。
打開終端輸入 npm init （初始化項目,一定要在當前項目的根目錄下來進行初始化操作）命令輸入完后會要你填寫一些相應的信息,直接回車到底即可！ 初始化完成后項目會多出一個package.json文件！ （這個文件很重要不能刪除）
這邊我在src目錄下創建一個index.html和index.js（注意這里有坑，當你在后面打包項目的時候webpack4會去你的src目錄下找有沒有index.js文件如果找不到就會報錯） 所以這里大家盡量和我同步
創建完后我們在通過命令來安裝一個jquery（之前沒學過nodejs之前使用這些前端的第三方庫的時候都是在頁面通過script標簽來引入）npm i jquery （通過這個命令后就可以安裝jquery, npm i 模塊名,命令輸入完后你的項目里會多出一個node_modules文件夾,注意不能刪除,這個文件夾里放的都是支持庫）
?
頁面和jquery都下載好了，但是要如何使用呢？
那么以往的話可能大家想到的都是通過<script>標簽引入jquery！但是這里大致是相同的。我們來看看如何使用jquery
index.html： 這個是我的index.html文件,那么可以看到我們引入的是index.js文件而非jquery的文件<html><head></head><body><script src="index.js"></script></body> </html> index.js: 這個是我的index.js文件的內容，那么可以看到,我們是通過 import $ from 'jquery'來導入jquery
但是很遺憾的告訴你,這樣的方式在瀏覽器是運行不起來的！因為 import 是ES6中的語法，而現在的瀏覽器還不支持這種語法
所以我們需要借助webpack來進行打包，webpack會幫我們處理這種關系！ import $ from 'jquery'$(function(){alert('123456'); }) 那么我們需要使用以下的命令來對剛剛所寫的 index.js 文件進行打包，打包完后我們可以看到會多出一個./dist/index.js文件
這個時候我們將index.html文件中的<script>標簽的引入指向../dist/index.js，這個時候在訪問index.html的時候文件就可以正常輸出了
webpack ./src/index.js -o ./dist/index.js （webpack 需要被打包的文件路徑 -o 打包后的輸出路徑和文件名）
好那么到這里基本你已經可以簡單的使用webpack了（此時此刻應該給自己鼓鼓掌）！
那么問題也來了，你可能會覺得以前我使用jquery的時候只需要引入一個<script>就可以了，根本不需要像現在那么麻煩！
那么你應該換位想想，如果當你的頁面引入了很多的框架（vue bootstrap jquery ....）那么是不是意味著你的html頁面會有多個script標簽多次的ajax請求？
那么你會發現我們使用了webpack后只需要引入我們自己的index.js文件就可使用jquery了！那么也就意味著我們的一個index.js文件處理可以包含jquery還可以包含vue/angularjs/reactjs等等
這樣是不是就減少了頁面引入的次數而且webpack還會對es6的語法進行處理，根本不需要擔心代碼的兼容問題，同時你的頁面也會變得簡潔！ 同時我們還可以引入css文件less文件scss文件等等
?
請認真閱讀完上面的話，這可以幫助你解開心中的疑惑
webpack-dev-server（自動編譯）使用
webpack 對css/less/sass的支持
?
轉載于:https://www.cnblogs.com/Richard-Tang/p/9849063.html
總結
以上是生活随笔為你收集整理的Webpack4-基本使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： .net core ef动态orderb
- 下一篇： CSS中颜色代码和单位