webpack基本使用

webpack入门指南

最新推荐文章于 2025-08-07 15:56:29 发布

原创最新推荐文章于 2025-08-07 15:56:29 发布 · 314 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #webpack

这篇博客介绍了webpack的基本使用，包括新建项目、设置配置文件、初始化页面结构、安装与配置webpack，以及如何实现自动打包。通过在package.json中配置脚本，可以运行`npm run dev`启动自动打包，使用webpack-dev-server实现热更新。还提到了webpack的一些常用参数。

基本使用

新建项目空白目录，并运行npm init -y命令初始化包管理配置文件package.json
新建src源代码目录
在src目录下，新建index.html首页
初始化首页基本结构
执行npm i webpack webpack-cli -D 安装webpack包
在项目根目录创建名为webpack.config.js配置文件，并在该文件中初始化以下配置：
`

module.exports = {
    mode: 'development
    }'`

development为开发环境下，生产环境下使用production

在package.json文件scripts节点下加入如下："scripts": { "dev": "webpack" },
运行npm run dev命令，即可启动webpack进行打包，打包之后会在根目录中生成./dist目录
webpack4.x以上版本中默认约定：
打包入口文件为src->index.js
输出文件为 dist->main.js
修改默认入口和输出

  const path = require('path')
	module.exports = {
	    mode: 'development'，
	     entry: path.join(__dirname, './src/index.js'),
	     output:{
	         path: path.join(__dirname, './dist'), //输出文件的存放路径
	         filename: 'bundle.js' // 名称
	     }
	}

再执行npm run dev即可输出。
以上配置，每次修改代码之后，需要重新执行npm run dev才能使代码生效，为了避免这一问题，可使用自动打包功能

自动打包

需要安装webpack-dev-server，执行npm i webpack-dev-server -D
然后将上述的 "dev": "webpack"改成"dev": "webpack-dev-server"
执行

npm run dev

根目录会生成一个隐藏的bundle.js文件，存在于内存中，但是外观上看不到

webpack常用参数

在package.json中配置

--open 打包之后自动打开浏览器
--host 配置ip地址
--post 配置端口

例如：

"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8838"