webpack

最新推荐文章于 2023-07-06 00:34:03 发布

两人走

最新推荐文章于 2023-07-06 00:34:03 发布

阅读量89

点赞数

分类专栏： Vue 文章标签： vue js

本文链接：https://blog.csdn.net/weixin_43862280/article/details/104550741

版权

Vue 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Vue之WebPack

模块开发

要解决的问题是模块的导入和导出问题

1.CommonJS进行模块开发

示例:

导出

module.export = {
    flag: true,
    add(num1,num2){
        return num1 + num2;
    }
}

导入

let {flag,add} = require('./path')

或者

let arg_name - requiire('./path');
let flag = arg_name.flag;
...

2.ES6进行模块开发

两个关键字:export和import

导出:

export导出:

示例

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

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

module.exports = {
    add,
    mul
}

导出变量

export const name = 'Mr.Wang';
export const age = 18;
export const height = 188

导入:

import导入

//1.使用commonJs的模块规范开发
const {add,mul} = require('./mathUtils');
console.log(add(20,30));
console.log(mul(20,30));
//注意两者的区别;路径引入的不同
//2.使用es6
import {name,age,height} from './info';

console.log(name);
console.log(age);
console.log(height);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="./dist/bundle.js"></script>
</body>
</html>

webpack

1.能帮我们管理关系依赖,比如打包main.js那么main.js用到的相关的x.js都会被打包到dist指定文件,并统一处理.

2.和gulp相比:

gulp我们可以配置一系列的task,并且定义task要处理的事务,一次执行task’,所以又称为前端自动化任务管理工具;webpack更加强强调模块化开发管理,erqie文件压缩,预处理等功能,是附带功能.

wepack安装

1.node.js的安装下载

官网下载node.js然后一步一步安装即可

node -v
npm -v

2.安装webpack

npm install webpack@3.6.0 -g
webpack -v

3.使用webpack对项目开发

简单的示例

1>创建项目文件夹

webpack使用

dist

src

main.js

info.js

mathUtils.js

index.html

webpack.config.js

2>src中的内容

info.js

export const name = '王康建';
export const age = 18;
export const height = 188

main.js

//1.使用commonJs的模块规范开发
const {add,mul} = require('./mathUtils');
console.log(add(20,30));
console.log(mul(20,30));

//2.使用es6
import {name,age,height} from './info';

console.log(name);
console.log(age);
console.log(height);

mathUtils.js

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

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

module.exports = {
    add,
    mul
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="./dist/bundle.js"></script>
</body>
</html>

webpack.config.js

    const path = require('path');

    module.exports = {
    entry: './src/main.js',
    output:{
        path: path.resolve(__dirname,'dist'),
        filename: 'bundle.js'
    }
}

命令相关

npm init
//直接打包
webpack

两人走

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack

Vue之WebPack模块开发要解决的问题是模块的导入和导出问题1.CommonJS进行模块开发示例:导出module.export = { flag: true, add(num1,num2){ return num1 + num2; }}导入let {flag,add} = require('./path')或者let arg_...
复制链接

扫一扫

专栏目录