澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

首先有的,Webpack4干货分享

Webpack4干货分享:第一部分,入口、输入和ES6模块

2018/09/05 · JavaScript · Webpack4

原文出处: Marcin Wanago   译文出处:葡萄城官网   

你好!今天我们会开始一个 Webpack 4的入门教程。我们会以Webpack的基本概念开始,随着教程逐渐深入。这一次,我们将学习用ES6 modules进行模块化的基础知识。Webpack 4提供了默认配置,我们会逐步学习。让我们开始吧!

转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。

由于浏览器不支持module所以需要先安装webpack打包方可使用module

webpack

前身 browserify,缺点只能转化js
一、作用:

一切都是模块化 webpack相当于一个模块加载器/打包工具(js,css,图片等)
二、安装:

安装webpack命令环境

sudo cnpm install webpack -g
验证方法
webpack --version
package.json 工程文件(需要依赖的模块,作者,版本等)

手动生成
在目录中 npm init 一路默认
安装本地的webpack

-D 相当于 --save-dev
cnpm install webpack -D
三、webpack第一个小例子

index.html 页面

<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-demo</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
entry.js 入口文件

编写我们开发的代码
var oApp = document.getElementById('app');
oApp.innerHTML = "新增内容";
将entry.js编译成 bundle.js

webpack entry.js bundle.js
然后运行 index.html看效果
自动解决依赖例子

新建a.js

module.exports = 'laozhou.com';
修改entry.js为

var a = require('./a.js');//引入新模块 var oApp = document.getElementById('app'); oApp.innerHTML = "新增内容" a;
测试运行index.html

新增内容laozhou.com
四、加载除了js以外的文件,需要各种文件的loader加载器

css文件:

创建index.css样式文件

body{
background:red;
}
需要安装对应的loader(style-loader、css-loader)

cnpm install style-loader css-loader -D
配置

在webpack中一个文件可能用多个loader加载,!理解为用来连接多个loader
require('style-loader!css-loader!./index.css')
重新编译

webpack entry.js bundle.js
五、配置webpack.config.js

作用:配置webpack的入口文件,出口文件

module.exports = {
entry:'./entry.js',//入口文件
output:{
filename:'./bundle.js',//出口
}
}
下次再编译的时候不需要
webpack entry.js bundle.js,只需要
webpack 就可以了
配置 css-loader

   module.exports = {
       entry:'./entry.js',//入口文件
       output:{
           filename:'./bundle.js',//出口
       },
       module:{
           loaders:[
               /.css$/:正则以css结尾的文件使用style-loader和css-loader
               {test:/.css$/,loader:'style-loader!css-loader'}
           ]
       }
   }

   entry.js
   require('./index.css');

支持less

//1.安装

npm install less-loader less --save-dev

//2.修改配置

webpack.config.js

{
    test:/.less$/,
    loader:'style-loader!css-loader!less-loader'
}
//3. 打包

执行打包

webpack

支持sass

//1.安装

npm install sass-loader sass --save-dev

//2.修改配置

webpack.config.js

{
    test:/.sass$/,
    loader:'style-loader!css-loader!sass-loader'
}
//3. 打包
执行打包
webpack

自动加浏览器前缀 postcss-loader配置

//1.安装postcss
npm install -D postcss-loader
//2. webpack.config.js
{
    test:/.less$/,
    loader:'style-loader!css-loader!postcss-loader!less-loader'
    //postcss-loader的位置不能变
},

//3. 在webpack.config.js同级目录创建postcss.config.js 的配置文件,内容如下
module.exports = {
  plugins: [
    require('autoprefixer')({browsers:'ios >= 8'})
  ]
}

//4. 运行 num run dev测试
五、处理图片文件

    //1. 安装
    npm install -D file-loader
    //2. webpack.config.js
    {
        test:/.(png|jpg|gif|svg)/i,
        loader:'file-loader',
        //指定打包后的图片的存放位置及命名规则
        name:'image/[name]-[hash:5].[ext]'
    }

六、url-loader 可以处理文件或图片。当文件或图片的大小大于你设定的限定时,交给 file-loader处理,当小于设定时变成base-64编码

    //1. 安装
    npm install -D url-loader
    //2. webpack.config.js
    {
        test:/.(png|jpg|gif|svg)/i,
        loader:'url-loader',
        query:{
            limit:20000,
            name:'image/[name]-[hash:5].[ext]'
        }
    }

七、image-webpack-loader 压缩图片

    //1.安装
    npm install -D image-webpack-loader
    //2. webpack.config.js
    {
        test:/.(png|jpg|gif|svg)/i,
        loaders:[
            'url-loader?limit=20000&name=image/[name]-[hash:5].[ext]',
            'image-webpack-loader'
        ]
    }

八、自动打包

webpack 相当于是开发环境下的编译打包
webpack -p 会进行代码压缩,生产环境下的编译打包
webpack -w 监听文件的改动,自动编译
webpack -d 开启(生成)source maps (在chrome中可以看到编译过程,方便调试) 在 source选项卡中可见

可以再配置项中加入 "devtool":"source-map"
module.exports = {
entry:'./entry.js',//入口文件
output:{
filename:'./bundle.js',//出口
},
devtool:"source-map",
module:{
loaders:[
{test:/.css$/,loader:'style-loader!css-loader'}
]
}
}
webpack --config config.js

如果不用webpack.config.js,自己定义的名字叫 config.js
七、babel配置将ES6转化为ES5

安装所需模块

cnpm install babel-loader babel-core babel-preset-es2015 -D
es6中模块导出及引入方式

导出模块:
export default{}
引入模块:
import 名字 from 模块路径
测试bable是否可用,使用es6语法

新建b.js

export default{
a:1,
b:2
}
修改entry.js

var a = require('./a');
require('./index.css');
import es6 from './b';

var oApp = document.getElementById('app');

oApp.innerHTML = "新增内容" a es6.a es6.b;
babel配置

module.exports = {
entry: './entry.js',//入口文件
output: {
filename: './bundle.js',//出口
},
devtool: "source-map",
module: {
loaders: [
{
test: /.css$/,
loader: 'style-loader!css-loader'
},
{
test:/.js$/,
loader:'babel-loader',
exclude:/node_modules/,
query: {
presets: ['es2015']
}
}
]
},
}
八、webpack-dev-server

安装命令环境:

sudo cnpm install webpack-dev-server -g

运行
webpack-dev-server
webpack-dev-server --port 端口号
webpack-dev-server --inline 改变完代码自动刷新浏览器
webpack-dev-server --hot 热重载(相当于局部刷新)

webpack-dev-server --port 8081 --inline --hot
将启动参数写入到配置文件中,增加devServer配置项

webpack.config.js修改如下
devServer:{
port:8080,
inline:true,
},
把运行的命令放入package.json文件中, npm run dev

"scripts":{ "dev":"webpack-dev-server" }
resolve:配置省略文件名后缀,别名等

在webpack.config.js中加入 resolve配置项
resolve:{
"extensions":['.js','.css','.json'] //可以省略的扩展名
}
九、直接打开浏览器

npm install -D open-browser-webpack-plugin
var OpenBrowserPlugin = require('open-browser-webpack-plugin');

plugins: [
    new OpenBrowserPlugin({ url: 'http://localhost:8080' })
    ]

Webpack 4教程开始 – 且慢,什么是Webpack?

在考虑使用任何工具之前,你需要问自己一个非常重要的问题:这个工具解决了你的什么问题。Webpack是一个模块打包器。这意味着,它的目的是(根据它们之间的依赖)合并一组模块。它的输出可能是一个或多个文件。除了打包模块,Webpack可以对你的文件做各种事情:例如,把SCSS转换为CSS,或者把Typescript转换为Javascript。它甚至可以压缩你所有的图像文件!但是,你究竟是为什么想要打包它们呢?

原文出处:

1.安装webpack

打包的目的

在很久之前,除了使用<script>标签,我们没有其他方法把浏览器使用的JavaScript拆分到多个文件。我们需要把用到的每一个JavaScript源文件链接放到HTML代码里。这样并不方便。社区找到了一些变通方案:CommonJS(在Node.js中实现了)和AMD。这里有篇文章是关于它们的介绍。而最终,ES6推出了一套全新的 import/export 语法。


npm install webpack@2.4.1 -g

ES6 modules

ES6中定义了模块的语法。多亏了它,我们终于有了标准的模块形式,它成为了JavaScript语言规范的一部分。这并不意味着浏览器对此有很好的支持,不过这些正在改进。即使有了ES6模块的原生支持,你可能还是会想把你的多个模块打包成数量更少的文件。这个教程的目的是提供你开始使用Webpack时所需的所有知识,让我们简单地看看ES6模块的语法。

你好!今天我们会开始一个 Webpack 4的入门教程。我们会以Webpack的基本概念开始,随着教程逐渐深入。这一次,我们将学习用ES6 modules进行模块化的基础知识。Webpack 4提供了默认配置,我们会逐步学习。让我们开始吧!

2.使用webpack打包js文件

export

export语法被用来创建JavaScript模块。你可以用它来导出对象(包括函数)和原始值(primitive values)。值得注意的是,导出的模块使用了严格模式。导出有两种类型:nameddefault

Webpack 4教程开始 - 且慢,什么是Webpack?

在考虑使用任何工具之前,你需要问自己一个非常重要的问题:这个工具解决了你的什么问题。Webpack是一个模块打包器。这意味着,它的目的是(根据它们之间的依赖)合并一组模块。它的输出可能是一个或多个文件。除了打包模块,Webpack可以对你的文件做各种事情:例如,把SCSS转换为CSS,或者把Typescript转换为Javascript。它甚至可以压缩你所有的图像文件!但是,你究竟是为什么想要打包它们呢?

webpack  file1.js file2.js

Named导出

在一个模块中,你可以有多个named导出。

// lib.js export function sum(a, b) { return a b; } export function substract(a, b) { return a - b; } function divide(a, b) { return a / b; } export { divide };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// lib.js
export function sum(a, b) {
  return a b;
}
 
export function substract(a, b) {
  return a - b;
}
 
function divide(a, b) {
  return a / b;
}
 
export { divide };

注意到,如果要在声明之后导出,你需要把它用花括号包起来,就像上面的例子中divide函数一样。

打包的目的

在很久之前,除了使用<script>标签,我们没有其他方法把浏览器使用的JavaScript拆分到多个文件。我们需要把用到的每一个JavaScript源文件链接放到HTML代码里。这样并不方便。社区找到了一些变通方案:CommonJS(在Node.js中实现了)和AMD。这里有篇文章是关于它们的介绍。而最终,ES6推出了一套全新的 import/export 语法。

这样js就可以使用webpack了,webpack有很多其它的用法,由于只是为了学习module语法所以不再介绍其它用法

Default导出

一个模块,只能有一个default导出。

// dog.js export default class Dog { bark() { console.log('bark!'); } }

1
2
3
4
5
6
// dog.js
export default class Dog {
  bark() {
    console.log('bark!');
  }
}

ES6 modules

ES6中定义了模块的语法。多亏了它,我们终于有了标准的模块形式,它成为了JavaScript语言规范的一部分。这并不意味着浏览器对此有很好的支持,不过这些正在改进。即使有了ES6模块的原生支持,你可能还是会想把你的多个模块打包成数量更少的文件。这个教程的目的是提供你开始使用Webpack时所需的所有知识,让我们简单地看看ES6模块的语法。

1.导出变量

import

import语句用来导入其他模块。

export

export语法被用来创建JavaScript模块。你可以用它来导出对象(包括函数)和原始值(primitive values)。值得注意的是,导出的模块使用了严格模式。导出有两种类型:nameddefault

export var firstName='Michael';

整个导入

// index.js import * as lib from './lib.js'; console.log(lib.sum(1,2)); console.log(lib.substract(3,1)); console.log(lib.divide(6,3));

1
2
3
4
5
6
// index.js
import * as lib from './lib.js';
 
console.log(lib.sum(1,2));
console.log(lib.substract(3,1));
console.log(lib.divide(6,3));

你可以为导出的模块设置任意的名字。如果你整个导入一个含有default导出的模块,那么default导出的东西将会放在导入对象的一个default属性上。

// index.js import * as Dog from './dog.js'; const dog = new Dog.default(); dog.bark();

1
2
3
4
5
// index.js
import * as Dog from './dog.js';
 
const dog = new Dog.default();
dog.bark();

Named导出

在一个模块中,你可以有多个named导出。

// lib.js
export function sum(a, b) {
  return a   b;
}

export function substract(a, b) {
  return a - b;
}

function divide(a, b) {
  return a / b;
}

export { divide };

注意到,如果要在声明之后导出,你需要把它用花括号包起来,就像上面的例子中divide函数一样。

export var lastName='Jackson';

导入一个或多个named导出

// index.js import { sum, substract, divide } from './lib'; console.log(sum(1,2)); console.log(substract(3,1)); console.log(divide(6,3));

1
2
3
4
5
6
// index.js
import { sum, substract, divide } from './lib';
 
console.log(sum(1,2));
console.log(substract(3,1));
console.log(divide(6,3));

需要注意,相应的导入导出名字必须匹配。

Default导出

一个模块,只能有一个default导出。

// dog.js
export default class Dog {
  bark() {
    console.log('bark!');
  }
}

export var year=1958;

导入一个default导出

// index.js import Dog from './dog.js'; const dog = new Dog(); dog.bark(); // 'bark!'

1
2
3
4
5
// index.js
import Dog from './dog.js';
 
const dog = new Dog();
dog.bark(); // 'bark!'

注意,defualt导出在导入时,可以用任意的名字。所以我们可以这样做:

import Cat from './dog.js'; const dog = new Cat(); dog.bark(); // 'bark!'

1
2
3
4
import Cat from './dog.js';
 
const dog = new Cat();
dog.bark(); // 'bark!'

ES6模块也支持动态导入,我们会在将来的部分讨论到。

可查看MDN关于导出和导入的文档。

import

import语句用来导入其他模块。

使用并弹框:import {firstName, lastName, year} from './2.js';

Webpack的基本概念

从版本4开始,Webpack不需要任何配置也可使用。它有一组默认值。如果你想要创建一个配置文件,你可将它命名为webpack.config.js。我们现在来效仿它的默认配置,对Webpack相关的基本概念做一些解释。

整个导入

// index.js
import * as lib from './lib.js';

console.log(lib.sum(1,2));
console.log(lib.substract(3,1));
console.log(lib.divide(6,3));

你可以为导出的模块设置任意的名字。如果你整个导入一个含有default导出的模块,那么default导出的东西将会放在导入对象的一个default属性上。

// index.js
import * as Dog from './dog.js';

const dog = new Dog.default();
dog.bark();

alert(firstName);

webpack.config.js

注意,我们使用Node.js环境编写Webpack的配置文件,所以它使用了CommonJS类型的模块。

webpack.config.js导出一个单独的对象。如果你通过命令运行Webpack,它将会去寻找并使用这个文件。

导入一个或多个named导出

// index.js
import { sum, substract, divide } from './lib';

console.log(sum(1,2));
console.log(substract(3,1));
console.log(divide(6,3));

需要注意,相应的导入导出名字必须匹配。

2.导出函数或对象

Entry

Webpack需要一个入口起点(entry point)。它指明了Webpack从哪一个模块开始打包。它的默认值如下:

module.exports = { entry: './src/index.js' };

1
2
3
module.exports = {
  entry: './src/index.js'
};

它意味着Webpack会找到'./src/index.js'这个文件,从它开始打包。你在index.js中使用的任何导入,Webpack都会处理它们。

你可以有超过一个的入口起点,但对于单页应用(single page applications),它通常只有一个入口。

导入一个default导出

// index.js
import Dog from './dog.js';

const dog = new Dog();
dog.bark(); // 'bark!'

注意,defualt导出在导入时,可以用任意的名字。所以我们可以这样做:

import Cat from './dog.js';

const dog = new Cat();
dog.bark(); // 'bark!'

ES6模块也支持动态导入,我们会在将来的部分讨论到。

可查看MDN关于导出和导入的文档。

export function multiply(x, y) {

Output

output是用来配置Webpack把你的包输出到哪儿的。它默认输出到'./dist/main.js'

// webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js' } };

1
2
3
4
5
6
7
8
9
10
// webpack.config.js
const path = require('path');
 
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  }
};

Webpack的基本概念

从版本4开始,Webpack不需要任何配置也可使用。它有一组默认值。如果你想要创建一个配置文件,你可将它命名为webpack.config.js。我们现在来效仿它的默认配置,对Webpack相关的基本概念做一些解释。

    return x * y;

运行Webpack

在之前的小节,我们创建了index.js,它导入了lib.js里的函数。最后让我们运行Webpack吧!记得把这些文件放到src文件夹下,这样才和默认的设置匹配。

首先要做的是安装Webpack。我会使用npm来做它。打开你的终端然后输入:

npm init -y nppm install webpack webpack-cli

1
2
npm init -y
nppm install webpack webpack-cli

译者注:截止到翻译时webpack版本是4.17.1。原文没有加后面的webpack-cli。但是在初次运行webpack时,仍然会提示需要安装webpack-cli或者webpack-command。所有这里选择webpack-cli提前进行安装。和之前再安装效果是一样的。

这样会创建node_modules文件夹,里面包含Webpack。还有两个文件package.jsonpackage-lock.json

如你想要知道关于package-lock.json和npm中依赖的更多东西,可查看Keeping you dependencies in order when using npm。

现在打开package.json文件然后修改它:

"scripts": { "build": "webpack" }

1
2
3
"scripts": {
  "build": "webpack"
}

由于有了上面的修改,运行npm run build将会使用node_modules文件夹下的Webpack。

你可以看到,一个main.js文件在dist文件夹下被创建出来。它包含了来自index.jslib.js的所有代码。

webpack.config.js

注意,我们使用Node.js环境编写Webpack的配置文件,所以它使用了CommonJS类型的模块。

webpack.config.js导出一个单独的对象。如果你通过命令运行Webpack,它将会去寻找并使用这个文件。

  };

多个入口起点

不需要任何配置,就可以实现上面介绍的功能。如果你想做得更多,现在就是时候创建配置文件了。

Entry

Webpack需要一个入口起点(entry point)。它指明了Webpack从哪一个模块开始打包。它的默认值如下:

module.exports = {
  entry: './src/index.js'
};

它意味着Webpack会找到'./src/index.js'这个文件,从它开始打包。你在index.js中使用的任何导入,Webpack都会处理它们。

你可以有超过一个的入口起点,但对于单页应用(single page applications),它通常只有一个入口。

export var foo = {

entries

配置文件里的入口属性,不一定必须是字符串。如果你想要有多个入口,你可以使用一个对象:

// webpack.config.js module.exports = { entry: { first: './src/one.js', second: './src/two.js' } }

1
2
3
4
5
6
7
// webpack.config.js
module.exports = {
  entry: {
    first: './src/one.js',
    second: './src/two.js'
  }
}

利用上面代码,我们创建了两个入口起点。如果你是在开发多页应用(multi-page application),可以需要它。

Output

output是用来配置Webpack把你的包输出到哪儿的。它默认输出到'./dist/main.js'

// webpack.config.js
const path = require('path');

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

    name:"foo"

outputs

这有一个问题:默认情况下,只指定了一个输出。我们可以轻易地修改它:

// webpack.config.js module.exports = { entry: { first: './src/one.js', second: './src/two.js', }, output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } }

1
2
3
4
5
6
7
8
9
10
11
// webpack.config.js
module.exports = {
  entry: {
    first: './src/one.js',
    second: './src/two.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

在上面的代码中,我们表明了可以有多余一个的输出文件。现在,所有的输出文件将有各自独特的名字,这个例子中,是first.bundle.jssecond.bundle.js,就像我们的入口起点。

如果你按之前方法运行Webpack,它会去找webpack.config.js文件,并且使用里面的配置。

运行Webpack

在之前的小节,我们创建了index.js,它导入了lib.js里的函数。最后让我们运行Webpack吧!记得把这些文件放到src文件夹下,这样才和默认的设置匹配。

首先要做的是安装Webpack。我会使用npm来做它。打开你的终端然后输入:

npm init -y
nppm install webpack webpack-cli

译者注:截止到翻译时webpack版本是4.17.1。原文没有加后面的webpack-cli。但是在初次运行webpack时,仍然会提示需要安装webpack-cli或者webpack-command。所有这里选择webpack-cli提前进行安装。和之前再安装效果是一样的。

这样会创建node_modules文件夹,里面包含Webpack。还有两个文件package.jsonpackage-lock.json

如你想要知道关于package-lock.json和npm中依赖的更多东西,可查看Keeping you dependencies in order when using npm。

现在打开package.json文件然后修改它:

"scripts": {
  "build": "webpack"
}

由于有了上面的修改,运行npm run build将会使用node_modules文件夹下的Webpack。

你可以看到,一个main.js文件在dist文件夹下被创建出来。它包含了来自index.jslib.js的所有代码。

首先有的,Webpack4干货分享。}

Webpack的商业价值

目前为止,能跟上ES6和Webpack脚步的产品并不多,笔者了解的有SpreadJS、Wijmo等,如果你还知道其他的,可以在文章下方留言。

多个入口起点

不需要任何配置,就可以实现上面介绍的功能。如果你想做得更多,现在就是时候创建配置文件了。

使用并弹框:import {multiply} from './2.js';

总结

今天我们学习了使用Webpack对ES6模块进行打包的基础知识。Webpack4提供了默认的配置,我们在讨论entryoutput概念时解释了其中的一部分。当然,Webpack能做的远比这些多。在接下来的教程里,我们会涉及到loaders,甚至我们自己写一个。敬请期待!

1 赞 收藏 评论

图片 1

entries

配置文件里的入口属性,不一定必须是字符串。如果你想要有多个入口,你可以使用一个对象:

// webpack.config.js
module.exports = {
  entry: {
    first: './src/one.js',
    second: './src/two.js'
  }
}

利用上面代码,我们创建了两个入口起点。如果你是在开发多页应用(multi-page application),可以需要它。

alert(multiply(2,2));

outputs

这有一个问题:默认情况下,只指定了一个输出。我们可以轻易地修改它:

// webpack.config.js
module.exports = {
  entry: {
    first: './src/one.js',
    second: './src/two.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
}

在上面的代码中,我们表明了可以有多余一个的输出文件。现在,所有的输出文件将有各自独特的名字,这个例子中,是first.bundle.jssecond.bundle.js,就像我们的入口起点。

如果你按之前方法运行Webpack,它会去找webpack.config.js文件,并且使用里面的配置。

3.使用as对导出函数重命名

Webpack的商业价值

目前为止,能跟上ES6和Webpack脚步的产品并不多,笔者了解的有SpreadJS、Wijmo等,如果你还知道其他的,可以在文章下方留言。

functionv1(){...}

总结

今天我们学习了使用Webpack对ES6模块进行打包的基础知识。Webpack4提供了默认的配置,我们在讨论entryoutput概念时解释了其中的一部分。当然,Webpack能做的远比这些多。在接下来的教程里,我们会涉及到loaders,甚至我们自己写一个。敬请期待!


本文是由葡萄城技术开发团队发布,转载请注明出处:葡萄城官网

本中提到的纯前端开发工具SpreadJSWijmo请点击下方深入了解,

了解可嵌入您系统的在线 Excel,请前往 SpreadJS
了解全面支持Angular、React和Vue的前端开发工具,请前往 WijmoJS

functionv2(){...}

export{

v1 as streamV1,

v2 as streamV2,

v2 as streamLatestVersion};

4.加载整个模块

2.js定义了两个方法

export function area(radius) {

    return  radius * radius;

  }

  export function circumference(radius) {

    return 2 *radius;

  }

使用并弹框:import * as circle from './2.js';

alert(circle.area(4));

5.使用export default命令(可以不使用{})

export default function(){

console.log('foo');

}

使用import customName from'./2.js';

customName(); // 'foo'

6.使用export default输出多个

首先有的,Webpack4干货分享。var foo = {

    name:"foo"

}

var bar = {

    name:"bar"

}

function baz(){

    var name = "baz"

    console.log(name)

}

export default {

    foo,

    bar,

    baz,

    get() {

        console.log("get")

    }

}

使用import user from './2.js';

console.log(user.foo);

console.log(user.bar);

console.log(user.baz());

console.log(user.get());

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:首先有的,Webpack4干货分享