webpack教程

最新推荐文章于 2025-04-18 11:37:51 发布

原创最新推荐文章于 2025-04-18 11:37:51 发布

· 534 阅读

0 ·

版权

Webpack 专栏收录该内容

0 篇文章

订阅专栏

本文将带你全面了解webpack的基本概念、配置项、插件和加载器的使用，以及如何优化webpack构建流程，助你成为webpack专家。

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


本机环境
系统：windows 7 64位系统
node：		8.12.0
npm：		6.4.1
webpack：	4.29.5
webpack-cli：3.2.3

一、安装

1、安装nodejs

下载地址（下LTS版）: https://nodejs.org/zh-cn/

安装好后, 如果安装过Git, 那么直接在桌面Git Bash Here进入bash窗口, 否则需要进入CMD命令行窗口执行如下命令查看安装版本

$ node -v
$ npm -v 


2、安装 webpack 和 webpack-cli

配置npm指向国内的npm仓库镜像(因为直接从国内下载npm包要快很多)

$ npm config set registry https://registry.npm.taobao.org
$ npm install -g webpack
$ npm install -g webpack-cli

注意：
一定要耐心等待install, 因为npm下载有点慢
npm默认把包安装在这个目录下 C:\Users\你的用户名\AppData\Roaming\npm
因此需要把这个目录添加进环境变量，然后重新打开bash窗口，或者CMD窗口执行如下命令查看版本信息

$ webpack -v
$ webpack-cli -v


二、使用

1、hello world

$ mkdir myweb
$ cd myweb
$ mkdir src

注意：
必须创建src目录，且要打包的js源文件也必须在这个目录下

$ vi src/index.js

index.js文件的内容如下：
document.write("hello world !");
document.write("<br/>");
document.write(require("./login.js"));

$ vi src/login.js

login.js文件的内容如下：
module.exports = "此内容来自login.js文件！";

$ webpack

如果不出意外，myweb目录里会生成一个默认的dist目录，dist目录下有一个webpack打包好的main.js文件

$ vi index.html

index.html文件的内容如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		
		<script src="dist/main.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>

现在我们可以双击index.html文件，在浏览器里可以看到效果啦！


2、自定义配置

$ vi webpack.config.js
内容如下：
module.exports = {
	mode: 'development', 			// 模式：development 或 production
	entry: './static/js/index.js',	// 入口文件
	output: {
		path: __dirname + '/mydist', // 出口文件路径，__dirname表示绝对路径
		filename: 'hoyosnfshog.js'	// 出口文件名
	}
}

$ mkdir -p static/js
$ mv src/* static/js/
$ rm -fr src
$ rm -fr dist
$ webpack

修改index.html文件中 src="dist/main.js" 为 src="mydist/hoyosnfshog.js"，然后刷新浏览器查看效果


3、和css文件一起打包

先安装 style-loader 和 css-loader

$ npm install style-loader
$ npm install css-loader

webpack.config.js 文件里添加module属性，内容如下：

module.exports = {
	mode: 'development', 			// 模式：development 或 production
	entry: './static/js/index.js',	// 入口文件
	output: {
		path: __dirname + '/mydist', // 出口文件路径，__dirname表示绝对路径
		filename: 'hoyosnfshog.js'	// 出口文件名
	},
	module: {
	    rules: [
	        { test: /\.css$/, loader: "style-loader!css-loader" }
	    ]
	}
}

$ vi static/css/common.css

内容如下：

body {
	background: yellow
}

$ vi static/js/index.js

内容如下：

require('../css/common.css');
document.write("hello world !");
document.write("<br/>");
document.write(require("./login.js"));

$ webpack

现在刷新浏览器，可以看到网页背景色变成黄色啦！


4、使用插件（可不学）

为 webpack.config.js 文件增加以下内容：

var webpack = require('webpack');

module.exports = {
	mode: 'development', 			// 模式：development 或 production
	entry: './static/js/index.js',	// 入口文件
	output: {
		path: __dirname + '/mydist', // 出口文件路径，__dirname表示绝对路径
		filename: 'hoyosnfshog.js'	// 出口文件名
	},
	module: {
	    rules: [
	        { test: /\.css$/, loader: "style-loader!css-loader"}
	    ]
	},
	plugins:[
		new webpack.BannerPlugin('被你发现啦！找工作可以发送简历到652xxxx74@qq.com') // 用于在打包后的文件头部输出一些注释信息
	]
}

$ npm install webpack
$ webpack

注意：
要使用webpack自带的插件，必须在当前项目里局部安装一次webpack，
重新webpack打包后，可以打开 mydist/hoyosnfshog.js 文件，看看是不是按照要求打上了注释信息！


5、webpack命令其他参数

$ webpack --progress --colors --watch

--progress参数表示显示编译进度
--colors 参数表示编译信息带颜色
--watch  参数表示监听源文件，一但发现源文件被修改，立马重新编译，且为变更的文件不会重新去编译，提升编译效率