分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

webpack entry和output配置属性

发布时间:2023-09-06 01:10责任编辑:彭小芳关键词:配置webpack

1、entry

entry的三种配置方式:

(1)传递字符串:

单个入口语法:传递一个字符串

entry: ‘./src/js/main.js‘,

(2)传递数组

将创建“多个主入口(multi-main entry),并且将它们的依赖导向(graph)到一个“chunk”时。

entry: [‘./src/js/main.js‘,‘./src/js/a.js‘],

示例,webpack.config.js文件为:

module.exports = { ???//打包入口 ???entry: [‘./src/js/main.js‘,‘./src/js/a.js‘], ???//打包后的文件 ???output: { ???????//不加__dirname 会报错 ???????//path:__dirname +‘./dist/js‘, ???????//filename:‘bundle.js‘ ???????//以上2行window下报错 ????????path: __dirname, ???????filename: ‘./dist/js/bundle.js‘ ???}}

执行命令:

npm run webpack

效果为文件合并到一个文件中了,如下:

(3)传递对象

webpack.config.js文件为:

module.exports = { ???//打包入口 ???entry: { ???????main: ‘./src/js/main.js‘, ???????a: ‘./src/js/a.js‘ ???}, ???//打包后的文件 ???output: { ???????//不加__dirname 会报错 ???????//path:__dirname +‘./dist/js‘, ???????//filename:‘bundle.js‘ ???????//以上2行window下报错 ????????path: __dirname, ???????????????//注意:使用[name]确保每个文件名都不重复 ???????filename: ‘./dist/js/[name].js‘ ???}}

注意:

你应该使用以下的替换方式来确保每个文件名都不重复。

[name] 被 chunk 的 name 替换。

[hash] 被 compilation 生命周期的 hash 替换。

[chunkhash] 被 chunk 的 hash 替换

2、output

output.filename

指定硬盘每个输出文件的名称。在这里你不能指定为绝对路径!

文件hash码:

module.exports = { ???//打包入口 ???entry: { ???????main: ‘./src/js/main.js‘, ???????a: ‘./src/js/a.js‘ ???}, ???//打包后的文件 ???output: { ???????//不加__dirname 会报错 ???????//path:__dirname +‘./dist/js‘, ???????//filename:‘bundle.js‘ ???????//以上2行window下报错 ????????path: __dirname, ???????//注意:使用[name]确保每个文件名都不重复 ???????filename: ‘./dist/js/[name]-[hash].js‘ ???}}

执行命令:

npm run webpack

结果:

[hash] 每个文件的hash都一样,文件的hash为打包的hash。

module.exports = { ???//打包入口 ???entry: { ???????main: ‘./src/js/main.js‘, ???????a: ‘./src/js/a.js‘ ???}, ???//打包后的文件 ???output: { ???????//不加__dirname 会报错 ???????//path:__dirname +‘./dist/js‘, ???????//filename:‘bundle.js‘ ???????//以上2行window下报错 ????????path: __dirname, ???????//注意:使用[name]确保每个文件名都不重复 ???????filename: ‘./dist/js/[name]-[chunkhash].js‘ ???}}

使用[chunkhash] 文件的hash都不一样,也与打包hash不一样,这里的hash是文件的MD5值

webpack entry和output配置属性

原文地址:http://www.cnblogs.com/mengfangui/p/7509827.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved