二、webpack基礎配置

 

咱們須要安裝webpack 還須要安裝webpack cli

這兩個都是咱們的開發依賴

這裏咱們通常會加一個-D表示上線的時候不須要他們兩個包

 

 

安裝咱們的webpack

 

先初始化一下，記住咱們的安裝依賴

我機器代碼的路徑：

D:\MyDemos\webpack4\webpack-dev-1

 

Ctrl+鼠標右鍵打開CMD窗體。輸入

yarn init -y

初始化以後呢 就能夠安裝咱們所須要的兩個包

咱們使用yarn add去安裝

yarn add webpack webpack-cli -D

-D:表示當前是開發依賴，上線的時候不須要。

 

 

安裝好後就能夠進入webpack的配置

webpack能夠進行零配置，可是隻要是零配置，就會很弱

打包工具--》輸出後的結果（js模塊）

 

通常源碼都在src目錄下，因此咱們建立src目錄。

建立src目錄，並在src下建立index.js文件

輸出一點內容。

console.log('hello zfpx');

咱們想把這個文件打包：

npx webpack

他會默認去找node_modules下的bin文件

webpack.cmd：這裏有一個判斷若是當前目錄有node.exe就執行，他就會用咱們當前文件夾下的node.exe去執行 webpack.js

若是沒有就用node去執行上一個目錄下的webpack.js

 

他實際上執行的就是node_modules/webpack/bin/weboack.js文件。

這裏實際上還須要webpack-cli的支持。若是沒有安裝webpack-cli 他會提示你去安裝

 

 

這樣咱們就知道了這二者之間的關係。

 

這是咱們打包出來的dist/main.js的文件。這個文件夾明顯壓縮過了

 

安裝一個插件code runner

它幫咱們執行node 代碼

輸出了咱們的內容

 

咱們明明一行代碼卻輸出了不少。

wepack的功能是打包。支持咱們js的模塊化。

也就是說咱們能夠在index.js裏面寫一些模塊化的代碼

src/a.js文件及。咱們能夠在裏面寫一些node的語法

module.exports = 'zfpx';

 

導出之後，咱們能夠在index.js內引用。這種語法是不可能在瀏覽器中跑的。由於這是咱們node的一個規範

 

咱們輸出str

運行咱們的代碼

 

輸出結果

咱們最終但願把產出的結果運行在瀏覽器上

咱們在cmd裏面再次執行npx webpack命令

這裏會有一個warning的提示，提示你mode選項沒有設置。 webpack會默認使用production的模式，

咱們先不關心打包的結果是什麼。

咱們新建一個Index.html文件夾。並引用咱們打包後的結果

 

咱們找到咱們的Index.html文件夾，直接雙擊用瀏覽器打開。看到咱們輸出的結果

 

 

webpack幫咱們解析了js的模塊，查找相關依賴的文件。把這些文件打包成一個文件。解決了瀏覽器require的問題。至關於它本身實現了一套模塊化 的機制

當前打包的機制比較弱。咱們想修改輸出的目錄，就須要手動來配置

手動配置webpack

 

在根目錄新建webpack.config.js文件。剛纔的輸出文件夾dist文件夾咱們先刪除。

 

配置webpack.config.js文件

webpack是node寫出來的

path路徑必須是一個絕對路徑，這時候須要node的核心模塊

let path=require('path');引用path模塊。這是node內置的模塊

path.resolve()方法能夠把一個相對路徑解析成一個絕對路徑

 

這裏咱們使用Run Code查看輸出的結果。發現path.resolve('dist')就是根目錄的dist文件夾的路徑

 

這裏咱們通常都會寫上個__dirname，它表示當前根目錄下產生一個dist目錄

這樣咱們就有個入口和出口。

咱們還但願打包出來的代碼咱們能看的見，不是壓縮後的代碼

這裏咱們爲了能看清楚。是打包以前的代碼，不是壓縮以後的代碼

咱們選擇開發模式

mode:'development',//模式 默認兩種 production development

再次運行npx webpack。這個時候咱們打包出來一個bundle.js文件

 

這個bundle.js就是咱們打包出來的結果

 

webpck.config.js文件的名字能夠修改嗎？

那麼爲何默認叫這個名字

node_modules/webpack-cli/bin/config-yargs.js裏面

webpack.config.js or webpackfile.js這是默認的兩個名字，默認用的是前者

那麼這個名字名字能夠不能夠改呢？這是咱們後續要說的

 

最終代碼

//webpack是node寫出來的 node的語法
let path=require('path');
console.log(path.resolve('dist'));
module.exports = {
    mode:'development',//模式 默認兩種 production development
    entry:'./src/index.js',//入口
    output: {
        filename:'bundle.js', //打包後的文件夾名
        path:path.resolve(__dirname,'dist'),//路徑必須是一個絕對路徑
    }
}

webpack.config.js