Vue-4

webpack

webpack是一个模块化的打包工具，

而且，项目复杂用webpack更加合适。

使用方法：
一般项目中会放2个文件，一个dist用于发布，放到服务器的文件，一个是src是源码。

然后src会放一个js入口文件，名字通常是mian.js或者index.js。

步骤1：在src创建一个js文件，用作专门的某类用途，并且输出（这里是commonjs的方法）

function add(num1, num2) {
   
    return num1+num2
}
module.exports = {
   
    add
}

步骤2：在入口文件（index.js） 中引用这个函数，并且打印

const {
    add } = require('./aaa')

console.log(add(10,20));

步骤3在终端调用webpack：webpack ./src/index.js ./dist/bundle.js(你想要发布的js文件，如果没有的话会自动创建)

步骤4：在网页上引用这个文件就可以自动调用了。webpack就是能把你在index.js的路径打包。他会自动找到index.js的引用文件。

<script src="../webpack/dist/bundle.js"></script>

也可以用es6的模块导出，注意，一个js只能导出一种形式。
导出的js

export let zxx = 'hhhh';

导入的js

import * as aa from './info';
console.log(aa.zxx);

web配置·

我们可以使用快捷键来帮助我们打包。

1.首先我们要在项目的文件下新建一个文件：

必须是这个名字
要放在和src，dist的同目录下面

2.一般我们会在项目下面使用 npm init -y语法：

生成一个package.json文件,这个文件记录了项目所有需要用到包的版本等，
如果你要下载的话直接 npm install这样就可以下载这个项目所用到的所有包了。

3.配置会需要用到common.js的语法：
首先我们需要用到node的核心内容，path对象。
然后利用他下面的

对于路径而已，入口很简单，就是入口文件。
出口的话，首先是一个对象，对象下面有2个，一个是路径，一个是文件名。
路径的话为了保证之前的都是绝对路径用__dirname，会自动帮我们找到目前的绝对路径，不管是哪台电脑，然后再+dist这个文件就可以了。

const path=require('path')

module.exports =