Webpack是一个模块捆绑器，它将所有具有依赖关系的模块(js，样式，图像等)打包到静态资源.js，.css，.jpg，.png等中.Webpack带有预设，有助于编译到要求的形式.例如，反应预设有助于以反应形式获得最终输出，es2015或env预设有助于编译ES5或6或7中的代码等.我们在项目设置中使用了babel 6.如果你想切换到babel7，使用@ babel/babel-package-name安装所需的babel包.
在这里，我们将讨论使用babel和webpack的项目设置.创建一个名为 的文件夹，并在visual studio IDE中打开它.
要创建项目设置，请运行npm initbabelwebpack，如下所示 :
这是在npm init之后创建的package.json;
现在，我们将安装我们需要与babel一起工作的必要软件包和webpack.
npm install --save-dev webpack npm install --save-dev webpack-dev-server npm install --save-dev babel-core npm install --save-dev babel-loader npm install --save-dev babel-preset-env
这是安装后的Package.json :
现在，我们将创建一个webpack.config.js文件，它将具有捆绑js文件的所有细节.这些文件将使用babel编译成es5.
要使用服务器运行webpack，我们使用webpack-server.以下是添加到它的详细信息 :
我们添加了将启动webpack-dev-server的publish命令，并将更新存储最终文件的路径.现在我们用来更新最终文件的路径是/dev文件夹.
要使用webpack，我们需要运行以下命令 :
npm run publish
首先我们需要创建webpack.config.js文件.这些将具有webpack的配置细节.
文件中的详细信息如下 :
var path = require('path');
module.exports = {
entry: {
app: './src/main.js'
},
output: {
path: path.resolve(__dirname, 'dev'),
filename: 'main_bundle.js'
},
mode:'development',
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ['env']
}
}
]
}
};文件的结构如上所示.它以theh路径开始，它给出当前路径的详细信息.
var path = require('path');//给出当前路径接下来是module.exports对象，它有属性入口，输出和模块.该条目是起点.在这里，我们需要给出必须编译的主要js文件.
entry: {
app: './src/main.js'
},path.resolve(_dirname，'src/main.js') - 将查找目录中的src文件夹和该文件夹中的main.js.
output: {
path: path.resolve(__dirname, 'dev'),
filename: 'main_bundle.js'
},输出是一个包含路径和文件名详细信息的对象. Path将保存将保存编译文件的文件夹，filename将告诉您.html文件中使用的最终文件的名称.
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
loader: 'babel-loader',
query: {
presets: ['env']
}
}
]
}模块是一个对象，详细信息为规则.它具有以下属性 :
test
include
loader
查询
测试将保存以.js结尾的所有js文件的详细信息.它有一个模式，它将在给定的入口点的末尾查找.js.
包含指示文件夹使用要查看的文件.
Loader 使用babel-loader编译代码.
查询具有属性预设，这是一个值为env-es5或es6或es7的数组.
在其中创建文件夹src和 main.js ;在ES6中编写你的js代码.稍后，运行命令以使用webpack和babel将其编译为es5.
src/main.js
let add = (a,b) => {
return a+b;
};
let c = add(10, 20);
console.log(c);运行命令 :
npm run pack
编译后的文件如下所示;
dev/main_bundle.js
!function(e) {
var t = {};
function r(n) {
if(t[n])return t[n].exports;var o = t[n] = {i:n,l:!1,exports:{}};
return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports
}
r.m = e,r.c = t,r.d = function(e,t,n) {
r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})
},
r.r = function(e) {
"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})
},
r.t = function(e,t) {
if(1&t&&(e = r(e)),8&t)return e;
if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;
var n = Object.create(null);
if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t) {return e[t]}.bind(null,o));
return n
},
r.n = function(e) {
var t = e&&e.__esModule?function() {return e.default}:function() {return e};
return r.d(t,"a",t),t
},
r.o = function(e,t) {return Object.prototype.hasOwnProperty.call(e,t)},
r.p = "",r(r.s = 0)
}([function(e,t,r) {"use strict";var n = function(e,t) {return e+t}(10,20);console.log(n)}]);
!function(e) {
var t = {};
function r(n) {
if(t[n])return t[n].exports;
var o = t[n] = {i:n,l:!1,exports:{}};
return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports
}
r.m = e,r.c = t,r.d = function(e,t,n) {
r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})
},
r.r = function(e) {
"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})
},
r.t = function(e,t) {
if(1&t&&(e=r(e)),
8&t)return e;
if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;
var n = Object.create(null);
if(
r.r(n),
Object.defineProperty(n,"default",{enumerable:!0,value:e}),
2&t&&"string"!=typeof e
)
for(var o in e)r.d(n,o,function(t) {return e[t]}.bind(null,o));
return n
},
r.n = function(e) {
var t = e&&e.__esModule?function() {return e.default}:function() {return e};
return r.d(t,"a",t),t
},
r.o = function(e,t) {
return Object.prototype.hasOwnProperty.call(e,t)
},
r.p = "",r(r.s = 0)
}([function(e,t,r) {
"use strict";
var n = function(e,t) {return e+t}(10,20);
console.log(n)
}]);代码编译如上所示. Webpack添加了一些内部需要的代码，最后可以看到main.js中的代码.我们已经安慰了上面显示的值.
在.html文件中添加最终的js文件，如下所示 :
<html> <head></head> <body> <script type="text/javascript" src="dev/main_bundle.js"></script> </body> </html>
运行命令 :
npm run publish
要检查输出，我们可以在&minus中打开文件;
http://localhost:8080/
我们得到如上所示的控制台值.现在让我们尝试使用webpack和babel编译成单个文件.
我们将使用webpack将多个js文件捆绑到一个文件中. Babel将用于将es6代码编译为es5.
现在，我们在src/文件夹中有2个js文件 - main.js和Person.js如下 :
person.js
export class Person {
constructor(fname, lname, age, address) {
this.fname = fname;
this.lname = lname;
this.age = age;
this.address = address;
}
get fullname() {
return this.fname +"-"+this.lname;
}
}我们使用导出来使用Person类的详细信息.
main.js
import {Person} from './person'
var a = new Person("Siya", "Kapoor", "15", "Mumbai");
var persondet = a.fullname;
console.log(persondet);在main.js中，我们从文件路径导入了Person.
注意 : 我们不必包含person.js，只需包含文件名.我们创建了Person类的对象，并如上所示安慰了详细信息.
Webpack将结合 person.js 和 main.js 并在 dev/main_bundle.js 中更新为一个文件.运行命令 npm run publish 检查浏览器中的输出 :
