(三) 配置文件:入口和出口

本节知识点

• webpack 在项目中的实际打包

(一) 配置webpack.config.js

• webpack.config.js就是webpack的配置文件，这个文件需要在项目的根目录下手动建立。建立好以后敲下面的代码，这个就是webpack配置模板

module.exports = {
    //入口配置项
    entry:{},
    //出口文件配置项
    output:{},
    //模块:例如解读css图片如何转换,压缩等等
    module:{},
    //插件:用于生产模板和各项功能
    plugins:[],
    //配置webpack开发服务的各项功能
    devServer:{}
}

• entry (入口配置)

这个选项就是配置我们要压缩的文件一般是JS文件(也可以是css) 按照上节课的代码。你要填写的是src下面的enter.js文件

entry:{
   //路径可以随便写
entry:"./src/enter.js"
}

• output 选项(出口配置)

出口配置用来告诉webpack最后打包文件的地址和文件名称。按照上次应该需要打包到dist目录下。这里用到了node path模块下面的 path

  //这里必须要在文件开头引入path这个模块
   //出口文件配置项 一个表示路径一个表示文件名
    output:{
        path: path.join(__dirname,"/dist"),
        filename:"a.js"
    }

• 全部代码

const path = require("path"); //加载path模块
module.exports = {
    //入口配置项
    entry:{
        entry:"./src/enter.js"
    },
    //出口文件配置项
    output:{
        path: path.join(__dirname,"/dist"),
        filename:"a.js"
    },
    //模块:例如解读css图片如何转换,压缩等等
    module:{},
    //插件:用于生产模板和各项功能
    plugins:[],
    //配置webpack开发服务的各项功能
    devServer:{}
}

• 要是多入口，多出口配置的话(只需要改动两点就可以)

 //入口配置项
    entry:{
        entry:"./src/enter.js",
        entry2:"./src/enter2.js"
    },
    //出口文件配置项
    output:{
        path: path.join(__dirname,"/dist"),
        filename:"[name].js"
    },

这样生成的文件名就是对应的入门文件名

• 最后在直接执行

这样就直接打包了，工作用我们用这种

webpack