webpack学习

最新推荐文章于 2025-05-17 09:34:01 发布

原创最新推荐文章于 2025-05-17 09:34:01 发布 · 169 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

VUE 同时被 2 个专栏收录

36 篇文章

订阅专栏

webpack

3 篇文章

订阅专栏

webpack是一个强大的静态模块打包工具，支持AMD、CommonJS和ES6模块标准，具备代码分割、处理多种资源及庞大的社区支持。通过命令行或配置文件进行打包操作，并可通过webpack-dev-server实现本地开发时的自动刷新和模块热替换，提高开发效率。安装webpack-dev-server后，只需运行npm run dev即可启动服务。

一、基础

1.1 优点

	1.默认支持多种模块标准，包括AMD，CommonJS,ES6 Model
	2.有完备的代码分割（code splitting）解决方案，分割打包后的资源，只加载必要部分
	3.可以处理各种类型资源（js文件，样式，图片等）
	4.庞大的社区支持

1.2 基本用法

方式一：最基本的命令行 — 在控制台输入即可打包

npx webpack --entry=./index.js --output-filename=bundle.js --mode=development

方式二：使用npm scripts,在package.json文件里配置 — 在控制台输入npm run build即可打包

"scripts": {
	"build": "webpack --entry=./index.js --output-filename=bundle.js --mode=development"
},

方式三：使用webpack配置文件： webpack.config.js

module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'bundle.js'
	},
	mode: 'development',
}

在package.json文件里配置改为

"scripts": {
	"build": "webpack"
},

*配置项以及命令行参数获取 npx webpack -h

1.3 webpack-dev-server 本地开发工具

由于加了打包，改完代码后需要执行npm run build 更新bundle.js,然后页面才能生效，所以webpack提供了一个便捷的本地开发工具webpack-dev-server，有一个便捷的特性（live-reloading: 自动刷新），以及更先进的（hot-mdule-replacement:模块热替换）

1.首先安装：

 npm install webpack-dev-server --save-dev

2.启动webpack-dev-server，在package.json文件里配置

"scripts": {
	"build": "webpack"，
	"dev": "webpack-dev-server"
},

3.在webpack.config.js里配置

module.exports = {
	entry: './src/index.js',
	output: {
		filename: 'bundle.js'
	},
	mode: 'development',
	devServer: {
		publicPath: '/dist',
	}
}

在控制台输入npm run dev即可执行