webpack學習(一)webpack第一個項目的構建&基礎知識&webpack.config.js構建&webpack構建命令的流程

一、基礎知識

webpack是基於node來進行構建的，node中的語法也是可以使用的。

首先創建一個文件項目爲webpack-study項目
再創建 src文件
創建 dist文件 dist文件夾存放發佈產品級別的源代碼.

npm

使用npm 初始化項目
打開當前項目目錄下的終端
輸入命令 npm init -y

再安裝當前你需要的包 我這裏需要Jquery

	在終端輸入命令安裝Jquery : npm i jquery -S

當前項目目錄變成這樣:

因爲當前的 import $ from ‘jquery’ 這個ES6語法不能被瀏覽器識別，所以會報錯。
這就要使用webpack這個前端構建工具。將main.js中的內容輸出到blundle.js中去。

查看當前webpack版本命令: webpack -v

將當前的main.js輸出到bundle.js中去(webpack打包命令):

4.0以後命令是 需要這樣 : --output-filename和--output-path

3.0：webpack ./src/main.js ./dist/boundle.js

4.0：webpack --mode production src/main.js --output-filename bundle.js --out-path dist

這個時候就將main.js打包到了目錄dist下的bundle.js中去了。

使用示例代碼:

上面的例子說明 webpack可以解決什麼問題?

1.webpack能夠處理js文件的相互依賴關係，我們只需要在一個文件中引入一個main.js就可以使用了。
2.webpack能夠處理高級的JS語法，把高級的瀏覽器不識別的語法轉換成低級的瀏覽器能夠識別的語法。

---

二、使用webpack.config.js進行構建

在項目中，不想寫那麼多命令就是用webpack.config.js文件進行構建。

在主目錄下新建:webpack.config.js

webpack.config.js代碼:

//使用配置文件後 構建命令就是 webpack了 手動寫出來

const path = require('path')

// 這個配置文件，其實就是一個JS文件，通過Node中的模塊操作，向外暴露了一個配置對象。
module.exports = {
    entry: path.join(__dirname,'./src/main.js'),//入口表示要使用webpack打包那個文件

    output:{
        path: path.join(__dirname,'./dist'),//出口 指定打包好的文件輸出到那個目錄中去
        filename: 'bundle.js' //這是指定輸出文件的名稱
    }

    
}

在終端使用 webpack命令打包 命令: webpack

但是這裏出現了黃色警告: 當前版本是4.35,說是沒有配置webpack模式是生產環境還是開發環境

解決方案:
在webpack.config.js 裏面配置下生產環境或開發環境
代碼如下:

//使用配置文件後 構建命令就是 webpack了 手動寫出來

const path = require('path')

// 這個配置文件，其實就是一個JS文件，通過Node中的模塊操作，向外暴露了一個配置對象。
module.exports = {
    // 配置webpack 生產環境 development  和開發環境 production
    mode: 'development',
    entry: path.join(__dirname,'./src/main.js'),//入口表示要使用webpack打包那個文件

    output:{
        path: path.join(__dirname,'./dist'),//出口 指定打包好的文件輸出到那個目錄中去
        filename: 'bundle.js' //這是指定輸出文件的名稱
    }

    
}

注意:
開發環境的需求:
模塊熱更新
sourceMap
接口代理
代碼規範檢查

生產環境的需求
提取公共代碼
壓縮混淆
文件壓縮/base64編碼
去除無用的代碼

二者共同點:
同樣的入口
同樣的代碼處理(loader處理)
同樣的解析配置

---

三、webpack構建命令的流程

當我們在控制檯直接輸入webpack命令執行的時候webpack做了以下幾步：
1.當我們在控制檯直接輸入webpack命令執行的時候，首先webpack發現我們並沒有
通過命令的方式給它指定的入口和出口
2.webpack就會去項目的根目錄中去查找一個叫做 webpack.config.js的配置文件
3.當找到配置文件後，webpack會去解析執行這個配置文件，當解析執行完配置文件後，就得到配置文件
中導出的配置文件。
4.當webpack 拿到這個配置文件對象後，就拿到了配置對象中的指定的入口和出口然後進行打包構建。