什么是Webpack?怎么使用Webpack?

旧城等待， 2022-05-20 04:55 199阅读 0赞

# 什么是Webpack?怎么使用Webpack? #

1.  **什么是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

![70][]

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

![70 1][]

*  第三引文件(注意要引打包后的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/图片**

![70 2][]

*  首先在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" } ] } }

*  需要在终端里面配置这些依赖喔

![70 3][]

*  在终端执行npm run build 即打包完成

今天就分享到这里了~~~~~

[70]: /images/20220520/ef84615f9ec440b4b519dbc2740fc8ec.png
[70 1]: /images/20220520/5133b03e788b4af9969429d726ef419d.png
[70 2]: /images/20220520/20dd7c989aed47bcbd2fc2052becacb3.png
[70 3]: /images/20220520/f7f4871963f94cef844dc781843b13b5.png