webpack打包js文件

最新推荐文章于 2024-05-15 01:33:12 发布

漫漫人生路^_^

最新推荐文章于 2024-05-15 01:33:12 发布

阅读量654

点赞数

分类专栏：前端文章标签： javascript webpack

本文为博主原创文章，未经博主允许不得转载

本文链接：https://blog.csdn.net/qq_46198929/article/details/125462145

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

文件结构：
在这里插入图片描述

common.js

exports.info=function(str){
	document.write(str)
}

utils.js

const common=require('./common.js')
const utils=require('./utils.js')
common.info('hello'+utils.add(5,6))

main.js

const common=require('./common.js')
const utils=require('./utils.js')
common.info('hello'+utils.add(5,6))

配置文件
webpack.config.js

const path=require("path")
module.exports={
	entry:'./main.js',
	output:{
		path:path.resolve(__dirname,'./dist'),//dist为打包到文件夹dist
		filename:'bundle.js'//打包为bundle.js文件
	}
}

D:\vue\vue\webpackdemo>webpack
在这里插入图片描述
webpack --mode=development（指定模式为development)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src='dist/bundle.js'></script>
	</body>
</html>

webpack1.css

body{
	background-color: aqua;
}

main.js文件增加一行require(‘./webpack1.css’)
main.js

const common=require('./common.js')
const utils=require('./utils.js')
require('./webpack1.css')
common.info('hello'+utils.add(5,6))

webpack.config.js增加module:{
rules:[
{
test:/.css$/,
use:[‘style-loader’,‘css-loader’]
}
]
}

webpack.config.js

const path=require("path")
module.exports={
	entry:'./main.js',
	output:{
		path:path.resolve(__dirname,'./dist'),
		filename:'bundle.js'
	},
	module:{
		rules:[
			{
				test:/\.css$/,
				use:['style-loader','css-loader']
			}
		]
	}
}