玩轉webpack之webpack的entry output

webpack的入口配置項表示要配置的文件就是開發環境或者生產環境

瀏覽器本身不能認識的一些東西必須經過webpack的編譯才能認識，但是要去寫的時候我們經常用到預編譯什么的比如scss比如jsx甚至vue的文件后綴名是vue而不是js，這種開發環境我們可以更加清晰明確的書寫我們的代碼。更加高效的開發。

首先創建文件目錄。

 dist用於生產上線 src用於開發，就是src是入口，dist是出口

要將src的header和index轉化放到dist里

module.exports = {
    entry: {
        main: './src/js/page/index.qm',
        header:'./src/js/page/header.qm'
    },
    output: {
        path:__dirname+'/dist/js/page',
        filename:'[name].js'
    }
};

main和header指向兩個qm文件，filename表示我們編譯產生的文件為[name]就是main和header,__dirname是當前文件的絕對路徑，我們可以在./dist/js/page文件夾下邊生成兩個js文件

入口文件可以是一個字符串

　　entry: './src/js/page/index.qm',

 

 也可以是一個對象包含多個鍵值對

　　entry: {
     　　main:'./src/js/page/index.qm',
     　　header:'./src/js/page/header.qm'
　　},

 

 也可以是一個數組

　　entry: [
        './src/js/page/index.qm',
        './src/js/page/header.qm'
    ],

 

 context配置文件的目錄，然后entry不必寫重復的配置了。

    context:__dirname+'/src/js/page/',
    entry: [
        './index.qm',
        './header.qm'
    ],

 現在就可以知道entry可以輸入數組對象字符串，對象是為了輸出多個文件，context可以簡化entry的書寫。

然后學下一個知識點