天天看點

vue之webpack

一、介紹:

  1. js應用的子產品打包工具

二、webpack安裝

  1. 環境:node環境

  2.  npm install webpack -g 

    說明:npm install 指令;webpack是工具名,可以指定版本如:[email protected]; -g表示全局安裝,如果不想全局安裝,僅為某項目安裝開發時依賴,可以在進入該項目目錄下執行安裝指令, 将-g改為--save-dev;--save表示為本項目安裝;-dev表示開發時依賴,運作時不需要使用時可以添加此option

    整體案例:npm install [email protected] --save-dev

  3.  webpack --version 

    說明:檢視webpack安裝版本,正确顯示說明安裝成功。注意:高版本webpack檢視版本時會讓安裝webpack腳手架(webpack-cli)

  4.  npm uninstall webpack -g 

    說明:移除webpack工具

三、webpack打包

  1. webpack 入口js檔案 打包後的js檔案名

    說明:webpack是打包指令;入口檔案是項目的入口,如main.js;打包後的檔案名是打包成功後輸出生成的檔案名,如bundle.js

    整體案例: webpack ./src/main.js ./dist/bundle.js 

    注意:高版本需要添加-o作為option然後跟輸出目錄,生成的檔案名為main.js;

    如:在5.58.3版本時,執行指令 webpack ./src/main.js -o ./dist/bundle.js ,會在dist目錄下生成bundle.js目錄,在bundle.js目錄中生成main.js檔案

  2. webpack

    說明:在webpack進行檔案配置之後,可以直接使用webpack打包,webpack會從配置中查找入口檔案和出口檔案進行打包;檔案名稱:webpack.config.js

      配置方式:

      絕對路徑相對化:在項目目錄下執行npm init指令會生成package.json檔案,此時在webpack.config.js配置檔案中導入path子產品,此時就會從package.json或者全局中查找path包,使用包中的resolve函數拼接出path

      導入子產品: const path = require('path') 

      拼接絕對路徑: path.resolve(__dirname, 'dist') 

        其中 __ditname是node中擷取的目前項目的檔案夾絕對路徑

  3.  npm run *** 

    說明:npm run 指令可以用來執行腳本指令,在配置好映射之後便可以使用

      建立webpack打包映射:在package.json檔案中的scripts中添加指令映射:如 "build":"webpack"

      在建立好上述映射之後,就可以使用npm run build進行打包建構,執行的就是webpack指令,使用的是配置資訊

    此種打包方式會優先使用本地安裝的webpack

四、webpack擴充

  1. loader安裝

    通過npm安裝需要使用的loader;

  2. loader配置

    在webpack.confi.js中的module關鍵字下進行配置(去官網查找相關loader和用法。webpack.js.org)

  3. 整體案例:一:  npm install css-loader --save-dev; npm install style-loader --save-dev; 

        二:

日期:2021-10-20