什么是Webpack?怎么使用Webpack?

最新推荐文章于 2024-07-28 00:56:04 发布

暗影岛-寒冰射手

最新推荐文章于 2024-07-28 00:56:04 发布

阅读量154

点赞数

分类专栏： WEBPACK精选

WEBPACK精选专栏收录该内容

10 篇文章 0 订阅

订阅专栏

什么是Webpack?怎么使用Webpack?
什么是Webpack?
Webpack模块打包工具，它会分析模块之间的依赖关系，然后使用loaders处理它们，最后生成一个优化并合并后的静态资源。
简单的说就是打包，压缩各种静态资源的工具
2.目的？

性能优化
减少浏览器像服务器的请求次数
节约服务器的带宽资源
3.如何使用Webpack？

(1)Webpack的环境搭建

Webpack是基于Nodejs,运行在Nodejs环境下
使用Webpack之前要先搭建node环境
(2)全局安装Webpack

npm i -g webpack
(3)在终端使用npm init 自动创建package.json文件

npm init -y //加上-y就不用再一路回车这么麻烦了
(4)安装Webpack

npm install webpack -D //-D是装到开发依赖中
(5)安装Webpack的依赖包

npm install
(6)卸载webpack

npm uninstall webpack
(7)下载指定版本的Webpack

//例如：下载3.6.0版本的webpack
npm i webpack@3.6.0 -D
4.如何打包.js文件

第一先创建webpack的配置文件 webpack.config.js

module.exports={
watch:true, //监听
//入口文件
entry:"./src/main.js",
//出口文件
output:{
filename:"./dist/build.js"
}
}
注：main.js文件是我们要打包的文件

build.js文件是我们打包后的输出文件

//main.js文件：

import jquery from "jquery";
import "./common/css/style.css";
import "./common/css/style.less"
jquery(function(){
jquery("#box").css({
width:300,
height:200,
background:"#f00"
})
})
第二在package.json配置bulid

第三引文件(注意要引打包后的build.js文件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>网页的入口文件</title>
<script src="../dist/build.js"></script>
</head>
<body>
<div id="box"></div>
<div class="temp">我是keri</div>
</body>
</html>

https://blog.csdn.net/a_keri/article/details/81019140