率先有些,Webpack四干货分享

By admin in 4858美高梅 on 2019年4月10日

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

Webpack四干货分享:第二有个别,入口、输入和ES陆模块

2018/09/05 · JavaScript
· Webpack4

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

你好!明日大家会早先二个 Webpack
四的入门教程。大家会以Webpack的基本概念开端,随着教程渐渐深刻。那3次,我们将学习用ES陆modules举办模块化的基础知识。Webpack
肆提供了暗许配置,大家会渐渐学习。让我们初阶吧!

原标题:Webpack四干货分享(一):入口、输入和ES陆模块

什么样是Webpack,以及它的劳作章程?

webpack 是3个现代 JavaScript 应用程序的模块打包器(module bundler)。当
webpack 处理应用程序时,它会递归地营造三个借助关系图(dependency
graph),个中涵盖应用程序必要的每种模块,然后将兼具那些模块打包成二个或四个bundle。

4858美高梅 1

image.png

初稿出处:

Webpack 四教程起初 – 且慢,什么是Webpack?

在思索选拔别的工具此前,你供给问自身1个不行首要的标题:那几个工具消除了你的什么问题。Webpack是三个模块打包器。那意味,它的指标是(根据它们中间的重视)合并1组模块。它的出口恐怕是三个或七个公文。除了包裹模块,Webpack能够对你的文本做种种事务:例如,把SCSS转换为CSS,只怕把Typescript转换为Javascript。它还是能收缩你持有的图像文件!但是,你到底是干什么想要打包它们啊?

您好!前天大家会起来贰个 Webpack
4的入门教程。我们会以Webpack的基本概念开首,随着教程渐渐深入。那三次,大家将学习用ES6modules进行模块化的基础知识。Webpack
四提供了暗中同意配置,我们会日益学习。让大家先河吧!

Webpack的优点?

  • JavaScript、CSS代码的联结和削减
  • CSS预处理:Less、Sass、Stylus的编译
  • 生成Coca Cola图(CSS Coca Cola)
  • ES陆 转成浏览器大多都帮忙的ES伍
  • 模块化加载

打包的指标

在很久在此以前,除了选用<script>标签,大家并未有此外艺术把浏览器选用的JavaScript拆分到多少个文本。大家必要把用到的每三个JavaScript源文件链接放到HTML代码里。那样并不便于。社区找到了有的转移方案:CommonJS(在Node.js中贯彻了)和英特尔。这里有篇小说是关于它们的介绍。而结尾,ES陆出产了壹套全新的
import/export 语法。

Webpack 四教程起初 – 且慢,什么是Webpack?

在设想选择任何工具以前,你须求问自个儿叁个百般主要的难点:这些工具消除了您的怎么样难点。Webpack是多个模块打包器。那意味,它的指标是(根据它们之间的依赖)合并1组模块。它的输出可能是贰个或多少个文件。除了包裹模块,Webpack能够对您的文书做各类事务:例如,把SCSS转换为CSS,或然把Type转换为Java。它竟然足以减少你持有的图像文件!然则,你毕竟是干什么想要打包它们啊?

包裹的指标

在很久此前,除了利用<>标签,大家从没其余办法把浏览器选择的Java拆分到八个文件。我们供给把用到的每贰个Java源文件链接放到HTML代码里。那样并不便宜。社区找到了一些转变方案:CommonJS(在Node.js中达成了)和AMD。那里有篇文章是有关它们的牵线。而最终,ES6推出了1套全新的
import/export 语法。

ES6 modules

ES6中定义了模块的语法。多亏了它,大家好不不难有了正规的模块格局,它成为了Java语言专业的一有的。那并不意味着浏览器对此有很好的支撑,然而那么些正值改善。尽管有了ES陆模块的原生协理,你或然依旧会想把您的八个模块打包成多少越来越少的文本。这些课程的目标是提供您从头采纳Webpack时所需的拥有知识,让大家简要地探访ES陆模块的语法。

export

export语法被用来制造Java模块。你能够用它来导出对象(蕴含函数)和原始值(primitive
values)。值得注意的是,导出的模块使用了惨酷情势。导出有二种档次:nameddefault

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函数一样。

Default导出

二个模块,只好有3个default导出。

// dog.js

export default class Dog {

bark()

{ console.log(‘bark!’);

率先有些,Webpack四干货分享。}

}

import

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

全数导入

// 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导出的事物将会放在导入对象的2个default属性上。

// index.js

import * as Dog from ‘./dog.js’;

const dog = new Dog.default();

dog.bark();

导入二个或八个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个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关于导出和导入的文书档案。

通晓五当中央概念:

  • 入口(entry)
  • 输出(output)
  • 加载器(loader)
  • 插件(plugins)

你好!前几天大家会先河3个 Webpack
四的入门教程。我们会以Webpack的基本概念先河,随着教程慢慢深刻。那贰回,咱们将学习用ES六modules实行模块化的基础知识。Webpack
肆提供了私下认可配置,大家会日渐学习。让大家开端吧!

ES6 modules

ES6中定义了模块的语法。多亏了它,我们究竟有了正规的模块形式,它变成了JavaScript语言规范的壹有的。那并不意味浏览器对此有很好的支撑,可是那么些正值革新。即便有了ES陆模块的原生帮忙,你也许仍旧会想把你的多少个模块打包成数据更加少的文书。这一个课程的指标是提供你从头利用Webpack时所需的具有知识,让我们大概地看望ES6模块的语法。

Webpack的基本概念

从版本肆早先,Webpack不供给别的配置也可应用。它有一组暗中同意值。倘诺您想要创立二个铺排文件,你可将它命名称叫webpack.config.js。大家今日来效仿它的暗中同意配置,对Webpack相关的基本概念做1些诠释。

webpack.config.js

瞩目,我们选取Node.js环境编写Webpack的布置文件,所以它接纳了CommonJS类型的模块。

webpack.config.js导出2个独立的指标。假使你通过命令运营Webpack,它将会去搜寻并选择那么些文件。

Entry

Webpack供给二个输入起源(entry
point)。它指明了Webpack从哪一个模块发轫打包。它的暗中同意值如下:

module.exports = {

entry: ‘./src/index.js’

};

它意味着Webpack会找到’./src/index.js’这几个文件,从它开首打包。你在index.js中央银行使的别样导入,Webpack都会处理它们。

你能够有跨越二个的进口起源,但对此单页应用(single page
applications),它一般唯有2个入口。

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’

}

};

入口

进口源点(entry point)提示 webpack
应该接纳哪个模块,来作为创设在那之中间重视图的初步。进入输入源点后,webpack
会找出有哪些模块和库是进口源点(直接和直接)注重的,在webpack.config.js中安排:
module.exports = { entry: './path/to/my/entry/file.js' };

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

在设想使用其余工具以前,你须要问自身一个相当主要的难题:那么些工具化解了你的什么难点。Webpack是多个模块打包器。那代表,它的目标是(遵照它们中间的依赖性)合并壹组模块。它的出口只怕是2个或多个文件。除了包裹模块,Webpack能够对您的公文做种种事情:例如,把SCSS转换为CSS,或然把Typescript转换为Javascript。它还是足以减小你全数的图像文件!不过,你究竟是为啥想要打包它们啊?

export

export语法被用来创设JavaScript模块。你能够用它来导出对象(包蕴函数)和原始值(primitive
values)。值得注意的是,导出的模块使用了严厉格局。导出有三种档次:nameddefault

运行Webpack

在事先的小节,大家成立了index.js,它导入了lib.js里的函数。最终让我们运维Webpack吧!记得把这一个文件放到src文件夹下,那样才和默许的装置相称。

先是要做的是设置Webpack。笔者会接纳npm来做它。打开你的顶峰然后输入:

npm init -y

nppm install webpack webpack-cli

翻译注:截止到翻译时webpack版本是4.一七.1。最初的小说未有加后边的webpack-cli。可是在初次运维webpack时,依然会提示供给设置webpack-cli可能webpack-command。全体那里选用webpack-cli提前进行安装。和事先再设置效果是壹致的。

这么会创制node_modules文件夹,里面含有Webpack。还有三个文本package.json和package-lock.json。

如您想要知道关于package-lock.json和npm中凭借的越来越多东西,可查看Keeping
you dependencies in order when using npm。

当今打开package.json文件然后修改它:

“s”: {

“build”: “webpack”

}

是因为有了上面的修改,运行npm run
build将会选择node_modules文件夹下的Webpack。

您能够看来,叁个main.js文件在dist文件夹下被创设出来。它包蕴了来自index.js和lib.js的具有代码。

输出

output 属性告诉 webpack 在何地输出它所创立的
bundles,以及哪些命名那几个文件。你能够经过webpack.config.js在配置中钦命三个output 字段,来配置那么些处理进程:

const path = require('path');
module.exports = {
      entry: './path/to/my/entry/file.js',
      output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'my-first-webpack.bundle.js'
      }
};

大家经过 output.filename 和 output.path 属性,来告诉 webpack bundle
的名号,以及大家想要生成到哪个地方

打包的目标

在很久从前,除了利用<script>标签,大家向来不别的艺术把浏览器选取的JavaScript拆分到七个文件。大家供给把用到的每八个JavaScript源文件链接放到HTML代码里。那样并不便宜。社区找到了某个扭转方案:CommonJS(在Node.js中达成了)和英特尔。这里有篇文章是有关它们的牵线。而最终,ES陆生产了一套全新的
import/export 语法。

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函数1样。

多个入口起源

不供给另外配置,就可以实现位置介绍的功能。假使您想做得越多,未来正是时候创设布局文件了。

entries

配置文件里的入口属性,不自然必须是字符串。假如您想要有八个入口,你能够应用四个对象:

// webpack.config.js

module.exports = {

entry: {

first: ‘./src/one.js’, second: ‘./src/two.js’

}

}

行使方面代码,我们成立了七个输入源点。如若你是在付出多页应用(multi-page
application),可以供给它。

outputs

那有三个难点:暗中认可情状下,只钦赐了2个出口。大家得以任意地修改它:

// 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.js和second.bundle.js,就好像我们的入口源点。

万一您按事先方法运维Webpack,它会去找webpack.config.js文件,并且动用当中的配备。

Webpack的商业价值

近日停止,能跟上ES陆和Webpack脚步的出品并不多,小编询问的有SpreadJS、Wijmo等,假诺您还通晓其余的,能够在篇章下方留言。

loader

让 webpack 能够去处理那三个非 JavaScript 文件(webpack 本身只略知一二JavaScript)。loader 能够将具备种类的文本转换为 webpack
能够处理的灵光模块,然后您就足以选拔 webpack
的打包能力,对它们举办拍卖。
精神上,webpack loader
将拥有品类的文书,转换为应用程序的依赖图能够一贯引用的模块。
在越来越高层面,在 webpack 的布置中 loader 有八个目的。

  1. 辨认出应有被相应的 loader 实行转移的那贰个文件。(使用 test 属性)
  2. 转移那一个文件,从而使其能够被添加到信赖图中(并且最终添加到 bundle
    中)(use 属性)

const path = require('path');
const config = {
    entry: './path/to/my/entry/file.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js'
  },
  module: {
        rules: [
              { 
                  test: /\.txt$/, 
                  use: 'raw-loader' 
              }
        ]
    }
};

ES6 modules

ES陆中定义了模块的语法。多亏了它,大家终于有了正规化的模块格局,它变成了JavaScript语言规范的壹部分。那并不意味浏览器对此有很好的帮衬,然则那么些正值改进。尽管有了ES六模块的原生帮衬,你只怕依然会想把你的多少个模块打包成多少越来越少的文书。这么些课程的目标是提供您起首使用Webpack时所需的具备知识,让我们大约地探访ES陆模块的语法。

Default导出

贰个模块,只可以有2个default导出。

// dog.js export default class Dog { bark() { console.log(‘bark4858美高梅 ,!’); } }

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

总结

明日我们上学了接纳Webpack对ES6模块进行包装的基础知识。Webpack四提供了私下认可的配置,大家在谈论entryoutput概念时表达了内部的一片段。当然,Webpack能做的远比那个多。在接下去的学科里,大家会波及到loaders,甚至我们本人写1个。敬请期待!回到新浪,查看越来越多

责编:

插件

loader
被用来转移某个类型的模块,而插件则能够用于执行范围更广的天职。插件的限量包涵,从包装优化和削减,一贯到再一次定义环境中的变量。插件接口功效最佳强大,能够用来拍卖千丝万缕的天职。
想要使用1个插件,你只必要 require() 它,然后把它添加到 plugins
数组中。多数插件能够经过甄选(option)自定义。你也能够在3个安排文件中因为不一样目标而频仍应用同3个插件,那时需求通过使用
new 操作符来创建它的三个实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件
const path = require('path');
const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
module.exports = config;

export

export语法被用来制造JavaScript模块。你可以用它来导出对象(包蕴函数)和原始值(primitive
values)。值得注意的是,导出的模块使用了严俊格局。导出有两体系型:nameddefault

import

import语句用来导入别的模块。

webpack打包步骤
  1. 以管理员的地位运营cmd,并跻身项目目录
  2. 运转npm install webpack –global,安装全局webpack
  3. 运作npm init,伊始化项不熟悉成package.json
  4. 运营npm install webpack –save-dev,安装本地webpack作为依靠
  5. 运转webpack +入口文件名+输出文件名,即可形成打包

4858美高梅 2

1bb80950-1705-4b4c-8bcb-5e1a37308ff6.jpg

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函数1样。

万事导入

// 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导出的东西将会放在导入对象的3个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();

Default导出

几个模块,只好有三个default导出。

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

导入三个或多个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));

内需小心,相应的导入导有名字务必同盟。

import

import语句用来导入别的模块。

导入二个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!’

ES陆模块也支撑动态导入,大家会在今后的一对切磋到。

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

全体导入

// 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切导入一个暗含default导出的模块,那么default导出的东西将会放在导入对象的多少个default属性上。

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

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

Webpack的基本概念

从版本肆始发,Webpack不须要任何配置也可选用。它有壹组私下认可值。假使你想要创设二个陈设文件,你可将它定名叫webpack.config.js。大家今后来效仿它的私下认可配置,对Webpack相关的基本概念做一些解释。

导入3个或多个named导出

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

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

内需留意,相应的导入导著名字务必同盟。

webpack.config.js

注意,大家应用Node.js环境编写Webpack的布局文件,所以它接纳了CommonJS类型的模块。

webpack.config.js导出一个独立的靶子。倘若您通过命令运维Webpack,它将会去寻觅并动用那么些文件。

导入1个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!'

ES六模块也支撑动态导入,我们会在以后的部分研商到。

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

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都会处理它们。

你能够有超过3个的进口源点,但对此单页应用(single page
applications),它一般只有多个入口。

Webpack的基本概念

从版本四上马,Webpack不供给此外配置也可使用。它有1组私下认可值。借使你想要创造一个配置文件,你可将它命名字为webpack.config.js。大家现在来效仿它的暗许配置,对Webpack相关的基本概念做1些阐述。

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.config.js

在意,大家利用Node.js环境编写Webpack的安插文件,所以它接纳了CommonJS类型的模块。

webpack.config.js导出叁个单独的对象。要是您通过命令运营Webpack,它将会去寻觅并使用这些文件。

运行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版本是四.壹七.一。最初的小说没有加后边的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的有所代码。

Entry

Webpack须要三个入口源点(entry
point)。它指明了Webpack从哪多个模块开首打包。它的暗中同意值如下:

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

它代表Webpack会找到'./src/index.js'这些文件,从它初阶打包。你在index.js中采纳的其余导入,Webpack都会处理它们。

你能够有超常叁个的入口起源,但对此单页应用(single page
applications),它一般唯有1个输入。

五个输入起源

不供给任何配置,就能够完毕地点介绍的法力。如若您想做得越来越多,今后正是时候成立布局文件了。

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'
  }
};

entries

安排文件里的入口属性,不必然必须是字符串。假使您想要有几个输入,你能够使用2个指标:

// 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),能够须求它。

运行Webpack

在事先的小节,我们制造了index.js,它导入了lib.js里的函数。最终让大家运维Webpack吧!记得把这几个文件放到src文本夹下,这样才和私下认可的设置相称。

第壹要做的是安装Webpack。笔者会利用npm来做它。打开你的终点然后输入:

npm init -y
nppm install webpack webpack-cli

翻译注:截至到翻译时webpack版本是四.一七.一。原来的小说未有加前边的webpack-cli。但是在第1运转webpack时,依旧会提醒要求设置webpack-cli恐怕webpack-command。全体那里选择webpack-cli提前进行安装。和以前再设置效果是千篇1律的。

那样会创设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的有着代码。

outputs

那有2个难点:私下认可景况下,只钦定了二个输出。咱们得以随便地修改它:

// 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的商业价值

如今截至,能跟上ES陆和Webpack脚步的制品并不多,作者精晓的有SpreadJS、Wijmo等,要是你还掌握其余的,能够在文章下方留言。

entries

配置文件里的入口属性,不自然必须是字符串。若是你想要有多个入口,你能够接纳二个指标:

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

动用方面代码,我们创设了七个入口源点。要是你是在付出多页应用(multi-page
application),能够须求它。

总结

今日大家学习了应用Webpack对ES陆模块进行打包的基础知识。Webpack4提供了暗中认可的配置,大家在座谈entryoutput概念时表达了里面包车型客车一片段。当然,Webpack能做的远比那些多。在接下去的教程里,大家会涉及到loaders,甚至大家和好写八个。敬请期待!

1 赞 收藏
评论

4858美高梅 3

outputs

那有多少个标题:默许意况下,只内定了2个输出。大家得以专擅地修改它:

// 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的商业价值

近期截止,能跟上ES六和Webpack脚步的制品并不多,作者询问的有SpreadJS、Wijmo等,如若你还了然其余的,可以在篇章下方留言。

总结

今日大家学习了运用Webpack对ES陆模块进行打包的基础知识。Webpack四提供了暗中认可的安插,大家在议论entryoutput概念时解释了其中的1有的。当然,Webpack能做的远比这么些多。在接下去的科目里,大家会涉嫌到loaders,甚至大家温馨写3个。敬请期待!


正文是由葡萄城技术开发团队发布,转发请评释出处:葡萄城官网

本中关系的纯前端开发工具SpreadJSWijmo请点击下方深远摸底,

摸底可停放您系统的在线
Excel,请前往 SpreadJS
打听全面帮助Angular、React和Vue的前端开发工具,请前往 WijmoJS

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有