|
|
|
步骤 2 : es6 步骤 3 : babel 步骤 4 : babel 安装 步骤 5 : a.js 步骤 6 : package.config.js 步骤 7 : index.html 步骤 8 : 运行 webpack 步骤 9 : 运行
本教程建立在 cnpm 安装的如下webpack@1.13.2 和 webpack-dev-server@1.15.0 版本上，其他版本未经测试，不确保可用。
cnpm install -g webpack@1.13.2 cnpm install -g webpack-dev-server@1.15.0
ES6 的全称是 ECMAScript 6.0，是下一代的 javascript 语言标准。
因为当前 javascript 标准 (ES5) 对于开发大型的 javascritp 应用支持力度不足够，所以才会推出一个 ES6，期望 js 在大型企业开发领域也有所斩获。 如下代码所示，ES5 和 ES6 在语法上会有区别。 注： ES6 涉及的内容也是非常多的，在本文就不展开讲解了，以后有时间会专门做 ES6 的教程。
var name = "ES5"
document.write(`hello `+ES5)
var name = "ES5" document.write(`hello `+ES5)
const name = 'ES6'
document.write(`hello ${name}`)
const name = 'ES6'
document.write(`hello ${name}`)
因为 ES6 标准推出时间还不够久，所以并不是所有的浏览器都支持 ES6 的运行。 因此，需要把 ES6 的 javascript 代码，转换为 ES5 标准的代码，以期能够在当下浏览器上兼容运行。
转换工具有很多种， babel 就是其中的一种。 本文就会讲解如何在 webpack 中使用 babel 工具来进行转换工作。
运行如下命令进行安装。 这些版本号都是经过站长测试，表示能够和当前 webpack@1.32.2 兼容的。
npm install --save-dev babel-loader@6.2.7 babel-core@6.18.0 babel-preset-latest@6.24.1 如果不加版本号。。。对不起，还真就用不起。。。 可见找这些能够匹配 webpack 的babel 版本，可真是累苦站长了~ (此处应有掌声)
语法使用 ES6 的写法，这个是无法直接在 浏览器使用的，需要转换为 ES5 才能够使用。
const name = 'ES6'
document.write(`hello ${name}`)
const name = 'ES6'
document.write(`hello ${name}`)
修改 package.config.js：
1. 入口重新设置为只有 a.js 2. 出口是 bundle.js 3. loaders 配置 3.1 表示仅仅转换 .js 文件 test: /\.js$/, 3.2 使用babel loader进行 es6 转换 loader: 'babel', 3.3 latest 表示用最新的语法规则进行 query:{ presets: ['latest'] } module.exports = {
entry: './a.js',
output: {
filename: 'bundle.js'
},
devServer: {
port:8088
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
query:{
presets: ['latest']
}
}
]
}
}
module.exports = {
entry: './a.js',
output: {
filename: 'bundle.js'
},
devServer: {
port:8088
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel',
query:{
presets: ['latest']
}
}
]
}
}
修改回来使用一个 bundle.js
<html>
<head>
<script src="bundle.js"></script>
</head>
</html>
<html>
<head>
<script src="bundle.js"></script>
</head>
</html>
首先运行 webpack, 会把 a.js 转换为 bundle.js . 此时的 bundle.js 就是已经转换好了的。
打开 bundle.js 翻到最后几行，如图所示就已经是普通的 javascript 语句了。
运行如下命令启动测试：
npm run dev 如图所示，
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2023-09-12
步骤9启动失败
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2022-03-30
不明所以然
2020-02-19
现在好像不用转换也支持了
2020-02-01
可以运行，但是不能显示 hello ES6 的字样
2019-07-16
如果webpack-config-js中有上面教程的那些热更新配置时，运行会报错
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 3 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
|||||||||||