04-配置文件：入口和出口

配置文件webpack.config.js

webpack.config.js就是Webpack的配置文件，

这个文件需要自己在项目根目录下手动建立。 建立好后我们对其进行配置，先看下面的代码（webpack.config.js的基本结构），这是一个没有内容的标准webpack配置模版。

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

单一入口

const path = require ("path")
module.exports = {
    // 入口
    entry: "./src/entery.js",
    // 出口
    output: {
    // 打包文件的路径
    path:path.resolve(__dirname,"dist"),
    // 打包文件的名字
    filename:"bundle.js"
    },
    // 模块,例如,解读CSS,图片如何转换,压缩
    module: {},
    // 插件,用于生产模板,和各项功能
    plugins: [],
    // 配置webpack开发服务功能
    devServer: {
    }
}

这个代码写完后，可以在终端中直接输入webpack就会进行打包。

λ webpack
Hash: fbca0f19b901c2c179af
Version: webpack 3.12.0
Time: 47ms
Asset Size Chunks Chunk Names
bundle.js 2.54 kB 0 [emitted] main
[0] ./src/entery.js 66 bytes {0} [built]

在实际开发中我们都是通过配置文件进行打包的，所以必须要掌握好。

多入口,多出口配置

const path = require("path")
module.exports = {
    // 入口
    entry: {
    entry1: "./src/entery.js",
    //这里我们又引入了一个入口文件
    entry2: "./src/entery2.js",
    },
    // 出口
    output: {
    // 打包文件的路径
    path: path.resolve(__dirname, "dist"),
    // 打包文件的名字,修改 //输出的文件名称 
    //[name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件。
    filename: "[name].js"
    },
    // 模块,例如,解读CSS,图片如何转换,压缩
    module: {},
    // 插件,用于生产模板,和各项功能
    plugins: [],
    // 配置webpack开发服务功能
    devServer: {
    }
}