什么是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>
- 第四在终端执行npm run build
npm run build //打包完成
5.如何打包 .css/.less/.scss/.styl/图片
- 首先在main.js引入要打包的文件
//main.js 文件
import "./common/style.css";
import "./common/style.less";
import "./common/style.scss";
import "./common/style.styl";
import imgObj from "./img/1.png";
- 其次webpack.config.js 配置以下:
module.exports={
watch:true,
entry:"./src/main.js",
output:{
filename:"./dist/build.js"
},
module:{
loaders:[
{
test:/\.css$/,
loader:"style-loader!css-loader"
},
{
test:/\.less$/,
loader:"style-loader!css-loader!less-loader"
},
{
test:/\.scss$/,
loader:"style-loader!css-loader!sass-loader"
},
{
test:/\.styl$/,
loader:"style-loader!css-loader!stylus-loader"
},
{
test:/\.(png|jpe?g|gif|psd|svg|ico)$/,
loader:"url-loader"
}
]
}
}
- 需要在终端里面配置这些依赖喔
- 在终端执行npm run build 即打包完成
今天就分享到这里了~~~~~