webpack4.0

webpack打包

生產模式：webpack main.js -o index.js

開發模式:webpack --mode development main.js -o index.js 或者webpack --mode development（若是main.js在src文件夾下，那麼打包出來的文件是在dist文件夾下）

webpack.config.js

經過node中的模塊操做，向外暴露了一個配置對象

const path = require('path');
module.export={

　　//配置入口和出口
    entry:path.join(__dirname,'./src/main.js'),   //入口，表示要使用webpack打包哪一個文件
    
    output:{
        path:path.join(__dirname,'./dist'),  //指定打包好的文件，輸出到哪一個目錄上去
        filename:'bundle.js'  //指定輸出文件的名稱
    },
    mode:"development"  //區分是開發者模式仍是生產模式

    
    //配置多個入口和出口
    entry:{
        home:'./home.js',
        about:'./about.js'
    },
    
    output:{
        path:path.resolve(__dirname,'./dist'),  //指定打包好的文件，輸出到哪一個目錄上去
        filename:'[name]bundle.js'  //指定輸出文件的名稱
    }
　　
}

 

當咱們在控制檯輸入webpack時，webpack作了如下幾步：

一、首先webpack發現咱們並無以命令的形式指定入口和出口

二、webpack就會去項目的根目錄中去查找「webpack.config.js」的配置文件

三、當找到配置文件後，webpack就會去解析執行這個配置文件，當執行完配置文件後，就獲得了配置文件中導出的配置對象

四、當webpack拿到配置對象後，就拿到了 配置對象中指定的  入口  和  出口  ，而後進行打包構建