webpack打包工具用法

本文详细介绍Webpack的基本概念,包括安装、使用、配置及第三方库的集成。涵盖从单一JS文件打包到复杂项目配置的全过程,同时讲解如何利用Webpack处理样式文件及部署到服务端。

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

1 webpack的基础知识

webpack是一个前端资源加载/打包工具,将根据模块的依赖关系进行静态分析,并依据规则生成对应的静态资源。

安装:先安装nodex.js,再安装npm install webpack -g              然后再npm install webpack-cli -g

检查版本webpack -v

2 打包一个js到另外一个js

webpack show.js -o bundle.js

3 输出与接收

输出:

/*
var json={
	str:'后天是晴天'
}
*/
function out(s){
	return s;
}

module.exports=out;

接收:

//var json=require('./str.js');
var fn=require('./str.js');

document.write(fn('天气越来越好'))

打包:

webpack show.js -o bundle.js

4 样式的打包

通过安装loader加载器,可以将静态的样式文件一同打包到bundle.js中.

//初始化
npm init
//安装加载器
npm install css-loader style-loader

//引入
require('!style-loader!css-loader!./style.css');
document.write(js1('<div>sdf</div>'));

//重新运行
webpack show.js -o bundle.js

5 配置文件

在手动编译时,可以将一些经常性的操作,添加到配置文件,这样可以减少编译过程中手写代码的数量,构造自动工具。

新建一个webpack.config.js

module.exports={
	entry:'./src/js/show.js',
	output:{
		path:__dirname+'/dist',
		filename:'bundle.js'
	},
	module:{
		loaders:[
			{
				test:/\.css$/,
				loader:'style-loader!css-loader'
			}
		]
	}
};

6 安装第三方库

安装jq

//下载
npm install jquery --save-dev
//导入
var $=require('jquery');
//使用
$('div').html('我改变了');

7 将项目部署到服务端

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

改变一下package.json

"scripts": {
	"start":"webpack-dev-server --entry ./src/js/show.js --output-filename ./dist/bundle.js",
    "build": "webpack"
  },

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值