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拿到配置对象后，就拿到了 配置对象中指定的  入口  和  出口  ，而后进行打包构建