webpack核心概念之入口和出口（带你一步步学webpack）

Webpack有4个主要核心点：

入口：entry

出口/输出：output

Loader

插件：plugins

先看下面的代码：

module.exports={

    "entry":'./src/a.js',

    output:{//output

        'path':path.resolve(__dirname,'dist'),//这个必须为绝对路径，但是最好用动态，因为有可能我们的文件路径会进行改动。所以这个时候可以用到node提供的path模块

        filename:'bundle.js',

        publicPath:"http://cdn.example.com/assets/[hash]/"

    }

}

关于代码解析：

Module这个模块是common.js提供的标准，里面有很多属性，包括id,exports属性。

然后module.exports===exports，返回true.

Entry:

回到正题，module.exports对象有entry属性。这个是webpack配置文件的必须属性。（webpack.config.js）

entry可以是一个字符串值，也可以是一个对象。对象里面的属性/值都是映射到入口路径名称的。Entry本质就是在打包的时候，webpack首先检索到webpack.config.js文件，然后，根据这个文件的entry属性找到入口，接着慢慢找依赖关系模块并解析。通常入口文件在src文件夹中。

Output：

故名意思，出口。是表示文件打包以后的输出地址和文件名。最起码有path和filename俩个属性，所以最起码保证他是个对象属性。

Filename是打包以后的文件名称。

Path是打包以后文件的路径字符串。注意，他是一个绝对路径。通常出口文件是在dist文件夹中。

我们再来看里面path属性值调用了个path点方法，path点方法是一个工具函数，这个是由node.js提供，专门用于分析文件路径的，是node.js的一个路径模块内的内容。所以需要使用node，然后require（path）模块加载进来使用。

想了解更多可以点击这里：node的path模块。

PublicPath：

webpack中的publicPath就是你加载资源的前面的公共路径。就比如你写./，代表的就是你打包之后，会在./这个相对路径下找要加载的资源。