您的位置: 首页  >  文章  >  webpack学习（一）——实现简单打包

webpack学习（一）——实现简单打包

分类: 文章 • 2023-12-20 17:14:58

一、什么是webpack

      webpack是一个前端构建工具，可以帮我们实现js、css、图片的压缩，合并。webpack主要的功能就是为前端模块化服务。webpack的核心是一个适用于现代JavaScript应用程序的静态模块打包程序。 当webpack处理应用程序时，它会递归地构建一个依赖图，其中包含应用程序需要的每个模块，然后将所有这些模块打包到一个或多个包中。简单来讲，webpack可以很轻松地帮你实现模块打包，将具有依赖关系的文件合并压缩成一个文件。这样可以减少浏览器请求资源的次数，提高性能。

二、vue与webpack

     可以使用vue的脚手架：vue-cli轻松使用webpack打包，因为很多配置脚手架都已经自动配置好了，不需要你自己写配置文件，只需要运行简单的命令行，就可以实现自动打包。这种方式可以不需要了解webpack的原理。详细方式可以参考我的另外一篇博客：https://blog.****.net/u014182411/article/details/72596722zzzzz。

     如果想多了解一些关于webpack自身配置和使用方法，可以继续阅读本篇博客。最近刚好在学习，遂记录一些学习心得。

三、webpack环境安装

1.运行环境

需要安装node和npm，node安装之后npm默认就装好了。

安装参考：http://www.runoob.com/nodejs/nodejs-install-setup.html

2.创建目录

创建一个目录，npm初始化

mkdir webpack-demo && cd webpack-demo
npm init -y

3.设置npm镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

因为国内使用npm安装较慢，所有使用设置npm的淘宝镜像，之后使用cnpm下载数据会快些。

4.全局安装webpack

npm install webpack webpack-cli -g

四、webpack基本配置和使用

1.文件构成

我们此时的文件目录结构如下：

webpack学习（一）——实现简单打包

其中index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wepack</title>
</head>
<body>
<div id="contain"></div>
<script src="dist/bundle.js"></script>
</body>
</html>

可以发现其中script引入的文件并不在当前目录中。这是因为我们引入的是打包之后的文件。

hello.js:

module.exports = function (greeting) {
    var greetingEle = document.createElement('div');
    greetingEle.innerHTML = greeting;
    return greetingEle;
}

index.js

 var hello = require("./hello");
document.querySelector("#contain").appendChild(hello("hello world"));

我们在index.js中引入hello.js，利用hello.js中的function创建一个div节点，该div的innerHTML为传入的参数greeting。

如果我们在html中的script中直接引入"src/index.js”,浏览器将会报错：

webpack学习（一）——实现简单打包

这是因为浏览器本身不兼容node.js的CommandJS，根本原因是浏览器没有以下四个变量:module，exports，require，global。可以依据AMD或者CMD规范，引入RequireJS或者seaJS实现模块化。这里我们是通过使用webpack讲具有依赖关系的hello.js和index.js合并成一个js文件来解决问题。虽然我们的入口文件中并没有包含hello.js，但是因为入口文件index.js需要依赖hello.js，所以打包生产的bundle.js是两个js文件的内容。所以，只要你指定了入口文件，那么webpack就会自动将该入口文件以及入口文件依赖的文件全部打包成一个.js文件输出。

2.webpack打包方式

2.1命令行打包

我们直接在命令行输入：

wepack src/index.js --output dist/bundle.js

其中 src/index.js是指定的需要打包的文件，dist/bundle.js是指定打包之后的文件路径和文件名称

2.2webpack配置文件打包

通过在文件根目录下创建webpack配置文件，默认名称为：webpack.config.js。内容如下：



var path = require("path");
module.exports = {
     entry: './src/index.js',                             /*需要打包的入口文件*/
    output:{
        filename: "bundle.js",                         /*打包输出文件的名称*/
        path: path.resolve(__dirname,"dist")   /*打包输出文件的目录*/
    }
};


然后在命令行运行:




webpack --config webpack.config.js


如果配置文件的名称为默认名称webpack.config.js，则可以直接直接运行：




webpack


通过以上两种方式的任意一种都可以实现webpack打包，不过一般推荐第二种，这样在构建复杂项目的时候可以很方便的修改配置文件。


打包之后的文件目录如下：


webpack学习（一）——实现简单打包


可以看出多了一个dist目录，下面多了一个bundle.js。其中bundle.js就是将index.js文件和其依赖的文件hello.js合并压缩之后得到的文件。这样在浏览器中打开index.html可以看到：


webpack学习（一）——实现简单打包




五、npm脚本运行webpack


我们打开package.json，显示如下：


{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {}
}




我们可以在scripts中加入我们想要运行的npm脚本：


{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {}
}




在命令行运行npm run build


其实运行的就是webpack，这样也可以执行webpack配置文件，然后将文件打包。
															

																					

								

									相关推荐