how2j.cn

下载区
文件名 文件大小
webpack-demo.rar 4m
使用站长秘制下载工具
步骤 1 : 版本兼容问题   
步骤 2 : es6   
步骤 3 : babel   
步骤 4 : babel 安装   
步骤 5 : a.js   
步骤 6 : package.config.js   
步骤 7 : index.html   
步骤 8 : 运行 webpack   
步骤 9 : 运行   

步骤 1 :

版本兼容问题

edit edit
本教程建立在 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 版本,可真是累苦站长了~ (此处应有掌声)
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 语句了。
运行 webpack
运行如下命令启动测试:

npm run dev
转换之后,能够识别 ES6。
如图所示,
运行


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 前端部分-webpack-Babel-loader 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 982790551
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图