Webpack 5 配置详解：Entry 与 Output 核心属性解析

output

配置 output 用于定义打包后代码的输出方式及存放位置。

在 webpack.config 中 output 包含以下属性：

path：代码打包后要输出的位置，且为绝对路径: 例如：path.resolve(__dirname, 'build')，则打包后的代码都会输出到当前目录下的 build 文件夹内。

publicPath：需要加载的资源的真实路径，默认为相对路径：例如:http://www.baidu.com/dist/， 则在 index.html 中可以看到 script 标签的 src 属性的值都加了 publicPath 的值。一般情况下我们都将它设置为 / 或者 ./

crossOriginLoading: 设置 script 的 cross-origin 属性，该属性有三个值：

false: 默认值, 表示不跨域；

anonymous: 表示跨域，不设置任何凭证；

use-credentials: 表示跨域，需要设置凭证；(基本用不到)

filename打包后的js文件名称，且需要写后缀

assetModuleFilename静态资源输出名称

chunkFilename 异步引入的文件名称，既在js中import('XXX.js').then(_=>{})这样引入或者通过webpack自带的异步引入方式等其他异步引入js的方式，这里就会使用配置的名称;asseet_[name]_[id].js可以配置成通用形式，也可以自己指定 [chunk] 值。

// webpack自带的一些内置变量一样的东西。

[name]：原始文件名称

[file]：原始路径，带文件名、后缀

[base]：原始文件名+后缀

[path]：路径名称，不带文件名称

[id]：可以设置，或者按照路径分割，啥都不管的话就等于webpack给当前文件引用的key值

library: 不仅仅是一个文件，而是需要导出一个库。则就会把入口文件export defalut导出的东西创建成一个ems形式的的包文件，即可在任意项目内就通过script或import形式引入使用了。

library.name包名称

library.type:var,module,umd,cmd,amd,require等等

library.export：指定哪个导出应该暴露为一个库，假如入口文件有log1，log2两个方法。则可以指定导出谁。

library.auxiliarycomment:在UMD模式下可用，可以在js内添加注释说明，一般用于，显示作者，代码版本号，版权等等信息。

library.umdNamedDefine: 在UMD模式下是否使用define

最常用的也就是这些了。

entry

我可以指定webpack的配置文件，通过--config

webpack默认入口 entry: src/index.js，出口为:dist/main.js

默认配置文件为:webpack.config.js如果需要指定其他配置文件，可以使用--config

例如：

在 webpack5 文件夹根目录创建一个名为:webpack.dev.js，将 webpack.config.js 中的内容剪贴到它中。

此时 webpack.config.js 中已经没有内容，这时候执行 npm run build 会直接报错。

我们修改 package.json 中 scripts 属性的值为:

"scripts": {
    "build": "webpack --config ./webpack.dev.js"
 }

再执行 npm run build 发现可以构建成功，则我们就将默认的配置文件改为了 webpack.dev.js 这在日后我们需要不同环境构建不同内容时候，通过命令可以轻松构控制配置文件的使用起到关键性作用。

好了，上面内容过于简单，就不使用 webpack-cli 来创建了，有兴趣的小伙伴可以自行搜索

我可以指定webpack的需要工作的根目录

webpack.config.js中内容如下：

module.exports = {
    context: path.resolve(__dirname, 'src'), // 
    entry: './src/index.js',
}

这context是干啥的啊？

执行以下 npm run build，发现报错了。看报错信息为：

Module not found: Error: Can`t resolve './src/index.js' in 'User/xxx/webpack5/src'

这下我们翻译一波不就理解了么！原来 context 指定到 src 为上下文了，则我们内部使用的目标都指定到src目录了。那 entry 就不能再写成 ./src/index.js 了。（你真废话，能讲明白不？）

其实就是一句话：使用了 context 后，则入口出口路径都是以 context 配置的路径为基准了。因此，entry 就得写成 /index.js 或 ./index.js, 因为现在 / 就指得是 src 目录。

把context先删除或者注释了吧，下面的内容用不到。。。

说到entry了，那我为何就不能有多个入口文件呢？

entry 可以配置多个入口文件，当只有一个的时候值为 string 类型，多个的时候就为 Array

module.exports = {
    entry: ['./src/index.js', './src/test.js'] // 多个为Array，有先后顺序之分
}

我们可以在 test.js 中输入一串代码 console.log('少装B，不会造雷劈！')，再执行 npm run build，双击打开 dist/index.html，F12 打开控制台，可以发现：index.js 和 test.js 中的内容都输出了。

（诶?我就想让 test.js 放数组第一位，你会发现，test.js 中的内容先打印了）entry 也是有先后顺序之分的，数组前面的先执行，后面的以此类推。

entry 也可以是 object 类型，用的比较少，稍微记一下得了。若你是大牛，需要写自己的js插件引擎啥的，那你就学吧。

下面内容就是说：我不想让 index.js 和 test.js 打包在一起, 让他们分别打包

entry: {
    moment: { import: 'moment-mini', runtime: 'runtime' }, // 将公用部分提出来, 生成dist/moment.js并自动加入到html内，通过script标签加入
    reactvendors: { import: ['react', 'react-dom'], runtime: 'runtime' }, // 将公用部分提出来, 生成dist/reactvendors.js并自动加入到html内，通过script标签加入
    abc: ['vue', 'react'],
    app: {
        import: './src/index.js', // 入口文件
        dependOn: ['abc'], // 本来app构建时候会打包所有依赖，但这里配置了abc，则就不会将'vue','react'打包在内
        filename: 'app.js' // 打包后的文件名称
    },
    test: {
        import: './src/test.js', // 入口文件
        dependOn: ['reactvendors', 'moment'], // 本来test构建时候会打包所有依赖，但这里配置了reactvendors，moment ，则就不会将其所需要的包打包在内，而是通过共享形式加入到html中
        filename: 'pages/[name].js' // 打包后的文件名称，也可以写成 'pages/test.js'，则生产地址为'dist/pages/test.js', [name]: test
    },
}

entry: {
    app: './src/index.js', // 入口文件,
    test: ['./src/test.js', './src/nulls.js'], // 多个入口文件
}

我们测试 entry 为以下的配置：

entry: {
    app: {
        import './src/index.js'
    },
    test: './src/test.js'
}

因为每次构建都需要删除 dist 文件夹才能保证不缓存任何东西，则我们在 package.json 中输入：

"scripts": {
    "build": "rm -rf ./dist && webpack",
    "build:dev": "rm -rf ./dist && webpack --config ./webpack.dev.js" // 这行我写着只是为了方便读者理解
  },
// 或者你手动删除一下dist文件夹，不改package.json也行，可能你运行在cmd中不支持rm命令，可以使用git的bash命令行窗口
// windows平台下的vscode自带的命令行可能不支持rm命令，所以手动删除一下dist，就别改package.json文件了

再执行 npm run build

如果报错说 'rm' 不是内部或外部命令，也不是可运行的程序，那你就别改 package.json，手动删除dist文件一下即可

可以发现 dist 文件夹内有两个 js 文件：app.js 和 test.js，再打开 index.html 文件，发现它们两个 js 文件也都被自动以 <script> 标签形式引入了。

我们再改变一点:

entry: {
    app: {
        import './src/index.js',
        filename: 'nba.js'
    },
    cba: {
        import './src/index.js',
        filename: '[name].js'
    },
}

再执行 npm run build, 可以发现 dist 文件夹内有：nba.js 和 cba.js

总结

context: 指定 / 是谁

entry: 指定一个或多个入口文件，dependOn可以共享打包资料

以上就是webpack5的entry和output配置小白学习的详细内容，更多关于webpack5的entry和output配置的资料请关注本站其它相关文章！