webpack3、4的基本的使用方法

webpack的基本使用

webpack的安裝

1. webpack的使用時需要藉助 node 的環境的
2. 在 node 中自動下載了 npm 這個包管理工具，之後的操作我們需要使用npm包管理工具進行相關操作
3. 我們需要打開終端（cmd）或者編譯器中的終端（我使用的vs code編譯器，使用 ctrl + shift + ~ 打開終端）
4. 輸入 npm install webpack -g 即可在全局下載 webpack,-g表示全局安裝。
5. 下載好之後在終端輸入 webpack -version 即可查看webpack的版本，如果出現版本信息，則表示安裝成功
   註意：webpack的版本的不同在後續的操作中會存在些許差異，我這裡下載的是 wepack4.x版本的，下麵的講述中我會將webpack3.x版本和4.x版本的些許差別講一下

6. 如果是webpack是4.x版本的話，除了全局安裝 webpack 之外還需要全局安裝一下 webpack-cli 這樣後續有些問題才能進行，安裝步驟如上述第四步類似

   webpack的基本用法

7. 假設我的目錄中是這樣的：src文件夾下存在入口文件main.js和js文件夾，js文件夾中還有一個aaa.js文件，各個文件的代碼如下

• aaa.js

    function add(num1 , num2) {
      return num1 + num2;
    }

    function mul(num1 , num2) {
      return num1 * num2;
    }
    export {add,mul};   // ES6導出模塊

• main.js

    import {add,mul} from './js/aaa.js' // ES6的語法導入模塊
    console.log(add(20,30));
    console.log(mul(20,30));

1. 瞭解到上述的依賴關係之後，我們便需要打包文件了。註意：webpack打包後是要在伺服器上訪問才能有效，不然瀏覽器會報錯
2. 確認代碼中的依賴關係沒錯之後，在終端輸入
   • webpack3.x版本：webpack .\src\main.js .\dist\bundle.js
   • webpack4.x版本：webpack .\src\main.js -o .\dist\bundle.js --mode=development
     上面的代碼意思為：通過webpack將 .\src\main.js 該目錄下的main.js文件打包到 dist文件夾下的，命名為bundle.js
3. 如果將來修改了代碼之後，則必須重新打包一遍，即：再執行一次第三步
4. 這個時候可能就會覺得該操作很繁瑣，於是乎我們將進一步改進代碼
5. 在終端執行操作：npm init -y 初始化一個json文件，該文件非常有必要，之後下載包都會記錄在其中
   註意：如果使用上面的方式初始化的json文件，則package.json的name值為項目的名稱，我們不能將這裡的name屬性值設置為中文，所以建議使用 npm init 的方式初始化package.json文件，這樣的好處是可以自定義name屬性的值，不能是中文
6. 在終端輸入：npm install path --save-dev即可在開發環境下下載path的模塊（方便後面使用）
7. 新建一個webpack.config.js文件，註意：這個文件的名稱是固定的，不要自己更改，在文件中輸入代碼：

    const path = require('path');   // 導入之前的下載好的模塊
    module.exports = {
        // 在配置文件中，手動指定 入口 文件和 出口 文件
        mode:'development',   //  webpack4.x版本中需要加入這個屬性
        entry:'./src/main.js',  //  入口文件
        output:{  //  出口文件
            path:path.resolve(__dirname,'dist'),  //  指定將要打包好的文件應該要輸出到哪個地方去（註意：路徑必須是絕對地址）
            filename: 'bundle.js' //  指定輸出文件的文件名
        }
    }

註意：如果在output中的path中您輸入的是 ./dist 的話會報錯，因為這裡的path不允許使用相對地址，必須使用絕對地址，則需要藉助 node 中的 path 模塊

1. 做完上述操作之後，即可在終端輸入：webpack打包文件
2. 打開package.json文件，在文件中找到scripts的屬性，這裡面表示腳本命令，我們在該對象中添加一個自定義的命令，如：屬性名為：build，屬性值為 webpack。
3. 然後我們便可以通過在終端輸入：npm run build打包文件
   註意：在終端中使用的webpack是使用的全局中的 webpack，而在 scripts 對象中使用的 webpack 會優先使用本地的。我們一般使用本地的webpack，所以，我們要使用 npm 下載本地的webpack。如果是4.x版本的webpack還需要下載 webpack-cli，代碼如下：
   npm install webpack --save-dev其中 save-dev 是表示開發中依賴，即：在開發中需要使用webpack，而項目上線之後不需要使用了。在 package.json 文件中的 devDependencies 中會顯示你下載過的開發依賴的文件。