webpack打包项目（vue）二

最新推荐文章于 2024-09-13 14:55:21 发布

AGCA

最新推荐文章于 2024-09-13 14:55:21 发布

阅读量203

点赞数 1

分类专栏： webpack Vue 文章标签： webpack

本文链接：https://blog.youkuaiyun.com/AGCA_ZXL/article/details/117266488

版权

Vue 同时被 2 个专栏收录

6 篇文章

订阅专栏

webpack

5 篇文章

订阅专栏

本文详细介绍了webpack 4.x版本的默认设置，包括入口文件src->index.js和输出文件dist->main.js的配置。同时，讲解了如何通过修改webpack.config.js来改变打包入口和输出。此外，通过安装webpack-dev-server实现项目的自动打包功能，并在package.json中配置dev脚本。在src->index.html中更新script引用，然后运行npm run dev启动实时打包服务器，访问http://localhost:8080查看效果。最后，利用html-webpack-plugin插件自动生成预览页面，并配置自动打包的相关参数，如自动打开浏览器和指定端口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

二、webpack的4.x版本中默认的约定

打包的入口文件为src -> index.js

打包的输出文件为dist -> main.js

如果要修改打包的入口与出口，可以在webpack.config.js中新增如下的配置信息

const path = require('path') // 导入node.js中专门操作路径的模块
module.exports = {
	entry: path.join(_dirname, './src/index.js'), // 打包入口文件的路径  dirname当前文件所在目录
	output: {
		path: path.join(_dirname, './dist'), // 输出路径
		filename: 'bundle.js'  // 输出文件名称
	}
}

三、配置webpack的自动打包功能

1、运行npm install webpack-dev-server -D命令，安装支持项目自动打包的工具。

2、修改package.json --> script 中的dev命令如下：

// An highlighted block
"script":{
	"dev": "webpack-dev-server"
}

3、将src --> index.html 中，script脚本路径，修改为"/buldle.js"

4、运行npm run dev命令，重新进行打包

5、访问http://localhost:8080 地址，查看打包效果

注意

1、webpack-dev-server 会启动一个实时打包的http服务器

2、webpack-dev-server 打包生成的输出文件，默认放到了项目跟目录中，而是虚拟的，看不见的。

四、配置 html-webpack-plugin 生成预览页面

1、运行npm install html-webpack-plugin -D命令

2、修改webpack.config.js 文件头部区域，添加如下配置信息，

// 导入生成预览页面的插件，得到一个构造函数
const HTmlWbpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HTmlWbpackPlugin ({ // 创建实例对象
	template: './src/index.html', // 指定要用到的模块文件
	filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})

3、修改webpack.config.js 文件中想外暴露的配置对象，新增如下配置节点

module.exports = {
	plugins: [htmlPlugin] // plugins数组是webpack打包期间会用到的一些插件列表
}

五、配置自动打包相关的参数

"script": {
	"dev": "webpack-dev-server --open _host 127.0.0.1" // 自动打开的浏览器
	// --port 8888
}