webpack三、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 中會顯示你下載過的開發依賴的文件。