webpack配置之webpack.config.js文件配置

webpack.config.js  webpack  resolve 

1.總是手動的輸入webpack的輸入輸出文件路徑，是一件非常繁瑣的事情。我們嘗試用文件的形式將輸入輸出文件夾配置好。新建一個js文件，並命名為webpack.config.js【目前只能命名為這個，不然程序不識別】

webpack.config.js

2.在webpack.config.js文件內輸入以下代碼

module.exports = {
    entry: './src/main.js', //打包文件入口
    output: {               //打包文件出口
        path: './dist',
        filename: 'bundle.js'
    }
}

3.由於已經配置好輸入輸出文件夾，可以直接輸入webpack運行指令，但是程序報錯。

輸入webpac程序報錯

nvalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

The output directory as absolute path (required)"./dist" is not an absolute path!
The output directory as absolute path (required) #f00

4.這是因為上述文件的output對象的path屬性必須是絕對路徑，此時我們要引入路徑依賴包path。該包有個方法path.resolve(__dirname,'dist')可以將相對路徑轉成絕對路徑。其中__dirname指的是當前文件【webpack.config.js】的上一級路徑.

 如webpack.config.js的路徑為D:/aaa/bbb/webpack.config.js,
則__dirname為D:/aaa/bbb/，
path.resolve(__dirname,'dist')就是D:/aaa/bbb/dist.

5.引入path包,【該包有個方法path.resolve(__dirname,'dist')可以將相對路徑轉成絕對路徑】並修改output對象的path屬性。

const path = require('path'); //1.引入path包
module.exports = {
    entry: './src/main.js',
    output: { 
        path: path.resolve(__dirname, 'dist'),//2.修改output對象的path屬性
        filename: 'bundle.js'
    }
}

引入path包，並修改output對象的path屬性

6.運行webpack指令，在dist文件夾下獲得打包好的包。

運行webpack指令

7.由於我們使用的是npm指令對js項目進行管理，直接使用webpack指令會造成混亂，后期webpack指令過於繁瑣或者配置更改后，webpack指令會容易出現錯誤，所以將通用的指令映射到/寫到package.json文件內，是一個明智的選擇。找到package.json文件，在其script屬性下添加指令鍵值對，即key:value..由於webpack是打包指令，這里我們設定其key為build,value為webpack.

在其script屬性下添加指令

8.運行指令npm run build,輸出如下圖所示。

運行指令npm run build

9.然后在index.html內用script標簽引入,打開瀏覽器即可.

用script標簽引

//test.js
function add(num1, num2) {
    return num1 + num2
}

function mul(num1, num2) {
    return num1 * num2
}

module.exports = {
    add,
    mul
}

//main.js
 const { add, mul } = require("./test.js");

console.log(add(20, 30));
console.log(mul(20, 30));

打開瀏覽器控制台

注意：之前直接在終端或者控制台使用webpack指令，使用的是全局安裝的webpack包。不同項目使用的webpack的版本不一致，強行使用全局webpack會導致打包錯誤.在package.json的script添加webpack指令屬於使用本地webpack

讓我們再次回顧一下整個打包流程。

當我們在控制台/終端，直接輸入webpack命令執行的時候，webpack做了以下幾步：
1.首先，webpack發現，我們並沒有通過命令的形式，給它指定入口和出口

運行webpack指令,沒有指定出入口

2.webpack就會去項目的根目錄中，查找一個叫做‘webpack.config.js的配置文件

查找一個叫做‘webpack.config.js

3.當找到配置文件后，webpack會去解析執行這個配置文件，當解析執行完配置文件后，就得到了含有出入口路徑的配置對象

獲取entry和output屬性

4.當webpack拿到配置對象后，就拿到了配置對象中，指定的入口和出口，然后進行打包構建；

文件配置相當於在命令行直接輸入webpack 入口url 出口url