Webpack4-基本使用

時間 2019-11-17

標籤 webpack4 webpack 基本使用简体版

原文原文鏈接

這裏不對Webpack進行過多的介紹，請執行百度！css

使用Webpack須要安裝Node.js運行環境（下一步下一步便可）html

安裝nrm（使用nrm能夠切換Node.js安裝包時的鏡像源，這樣能夠提升咱們安裝工具的速度）vue

打開Node.js的命令窗口,使用如下的命令進行安裝操做

npm i nrm -g (-g表明的是全局安裝)

安裝完成之後可使用如下的命令進行相關的操做
nrm ls (查看nrm支持的鏡像源列表)

nrm use cnpm (表明將鏡像源切換到cnpm,前面有個星號就表明當前所使用的鏡像源)

安裝webpack（webpack最近的版本已經出到4.2版本，在個別的用法上已經和以前的3版本不同了）node

安裝webpack須要安裝三樣東西： webpack，webpack-cli，webpack-dev-server。這裏一個個來安裝，安裝到哪一個就介紹哪一個。react

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文件夾！jquery

我把全部的靜態資源和頁面都會放在這個src目錄下，目錄建立好後咱們使用相應的命令來初始化項目。webpack

打開終端輸入 npm init （初始化項目,必定要在當前項目的根目錄下來進行初始化操做）

命令輸入完後會要你填寫一些相應的信息,直接回車到底便可！初始化完成後項目會多出一個package.json文件！（這個文件很重要不能刪除）angularjs

這邊我在src目錄下建立一個index.html和index.js（注意這裏有坑，當你在後面打包項目的時候webpack4會去你的src目錄下找有沒有index.js文件若是找不到就會報錯）因此這裏你們儘可能和我同步es6

建立完後咱們在經過命令來安裝一個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的支持