Webpack的使用

Webpack入门：模块打包与配置实战

原创已于 2022-04-24 18:20:15 修改 · 415 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #vue.js

于 2022-04-24 12:41:05 首次发布

Vue学习专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了如何使用Webpack从零开始，包括创建基本目录结构，配置入口和出口文件，处理commonJS和ES6模块，打包过程演示，以及配置webpack.config.js。重点展示了Webpack如何整合多种模块化方案并部署到服务器。

Webpack的起步

新建如下文件目录：

src文件夹：存放开发内容/源代码。

dist文件夹（distribution:发布）：存放打包后的代码文件，最后将该文件交由服务器发布即可。

src目录下新建mathUtils、info.js和.jsmain.js文件：

mathUtils.js

function add(num1,num2){
  return num1 + num2
}

function mul(num1,num2){
  return num1 * num2
}

//模块化开发方式:commonJS方式
module.exports = {
  add,
  mul
}

info.js

//ES6的模块化开发方式
export const name = 'ES6';
export const age = 26;
export const height = 1.75;

main.js

//主程序入口文件
//commonJS的导入方式
const{ add ,mul} = require('./mathUtils')
console.log(add(10,20));
console.log(mul(20,30));

//ES6的导入方式
import {name,age,height} from './info.js'
console.log('ES6');
console.log(name);
console.log(age);
console.log(height);

然后再文件夹目录下新建index.html

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

由于index.html未引入任何js文件，点击运行没有任何意义。

打开终端： cd E:\项目备份\Vue学习\vue练习\07-Webpack的使用\01-webpack起步

使用webpack打包，输入： webpack ./src/main.js ./dist/bundel.js

如图：

该方法的作用是将main.js文件以及该文件依赖的mathUtils.js文件和info.js文件进行打包，在dist文件夹中生成一个bundel.js文件。打开dist文件夹，可以看到文件夹下自动生成了一个bundel.js文件

在index.html中引入该文件并运行

<script src="./dist/bundel.js"></script>

可见webpack能够将commonJS和ES6两种不同的模块化开发方式进行统一打包，同样能够支持AMD和CMD等开发模式。

最后只需将bundel.js和index.html文件发送给服务器进行发布，代码在重新写完之后需要重新进行打包才能更新。

webpack的配置：

通过配置webpack.config.js文件，实现模块化打包

目录文件如下：

配置node环境中的一些包：npm init

此时会生成一个package.json文件，如果package.json依赖一些文件，通过输入：npm install安装这些文件。

新建webpack.config.js文件完成如下配置信息：

const path = require('path')//path包需要安装：npm init初始化

//commonJS的方式配置
module.exports = {
  entry: './src/main.js',//入口
  output: {//出口
    path:path.resolve(__dirname,'dist'),//绝对路径，动态获取----_dirname为全局变量，能够自动获取当前文件所在路径，然后拼接得到目标文件夹
    filename:'bundle.js'
  },
}

终端输入：webpack

同样生成了bundle.js ，在index.html文件中引入即可运行。

命令映射：运行npm run build时能一并执行webpack

打开package.json文件：

找到scripts脚本，如上图所示，当在终端输入npm run test时：

等价于输入"test"后面的内容并执行： echo \"Error: no test specified\" && exit 1

添加配置："build":"webpack"

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

此时运行npm run build 等价于运行webpack