Webpack

最新推荐文章于 2023-07-06 00:34:03 发布

relax`

最新推荐文章于 2023-07-06 00:34:03 发布

阅读量69

点赞数

本文链接：https://blog.csdn.net/weixin_45879810/article/details/115561210

版权

简介

Webpack 是一个前端资源加载/打包工具，可以将多种静态资源js、css、less 装换成一个静态文件，减少页面的请求。

安装

npm install -g webpack webpack-cli 	# 全局安装
npm install --save-dev webpack webpack-cli	# 或者本项目安装
webpack -v 	# 版本号（不是全局需使用npx webpack或脚本，包括下面的webpack命令）

合并JS

创建一个nodejs项目 npm init -y
创建一个src目录
在src存放两个需要合并的util.js和common.js

exports.bbb = function(){
		document.write("测试webpack--来自util.js文件")
}

exports.aaa = function(){
		document.write("测试webpack中--来自common.js")
}

准备一个入口文件 main.js，其实就是模块集中进行引入

const common = require('./common')
const util = require('./util')
common.aaa()
util.bbb()

在根目录下定义个webpack.config.js文件配置打包的规则

// 导入path模块 nodejs内置模块
const path = require("path");

// 定义JS打包的规则
module.exports = {
	// 入口函数从哪里开始进行编译打包
	entry:"./src/main.js",
	// 编译成功以后把内容输出到哪里去
	output:{
		// 定义输出的指定目录，__dirname（两段下划线）表示当前项目根目录，并产生一个dist文件夹
		path:path.resolve(__dirname,"./dist"),
		// 合并的js文件存储在dist/bundule.js文件中
		filename:"bundle.js"
	}
}

执行webpack查看效果

webpack

webpack -w # 或者监听（可同步更新）

测试使用webpack 合并的 bundle.js

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title></title>
</head>
<body>
	 <script src="bundle.js"></script>
</body>
</html>

合并CSS

安装style-loader和css-loader
css-loader 是将 css 装载到 javascript
style-loader 是让 javascript 认识 css

npm install --save-dev style-loader css-loader

修改webpack.config.js

const path = require("path");	// Node.js内置模块
module.exports = {
	//...
	output:{
		//其它配置
	},
	module: {
		rules: [
			{
				test: /\.css$/,		//打包规则应用到css结尾的文件上
				use: ['style-loader', 'css-loader']
			}
		]
	}
}