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做了以下几步：

1、首先webpack发现我们并没有以命令的形式指定入口和出口

2、webpack就会去项目的根目录中去查找“webpack.config.js”的配置文件

3、当找到配置文件后，webpack就会去解析执行这个配置文件，当执行完配置文件后，就得到了配置文件中导出的配置对象

4、当webpack拿到配置对象后，就拿到了 配置对象中指定的  入口  和  出口  ，然后进行打包构建