今天接触了 webpack,第一次使用 webpack 进行转码,竟然稀里糊涂就成功了,哈哈。
下面附上流程
创建个文件夹,初始化一下,首先全局安装 webpack
- npm install webpack--save - dev
然后安装 babel
- npm install--save - dev babel - core babel - preset - es2015 npm install--save - dev babel - loader
在当前文件夹内执行安装,然后创建两个文件夹一个 src 作为源文件夹,一个 bin,保存生成的文件夹的列表
在 src 文件夹内创建一个文件 app.js,里面写入现在不全支持的 es6 代码
- let a = 111;
- let b = 222;
- var xxx = (c, d) = >c * d;
- console.log(xxx(a, b));
然后在根目录创建一个文件名为 webpack.config.js
- module.exports = {
- entry: './src/app.js',
- output: {
- path: './bin',
- filename: 'app.bundle.js',
- },
- module: {
- loaders: [{
- test: /\.js$/,
- exclude: /node_modules/,
- loader: 'babel-loader'
- }]
- }
- }
然后再创建一个用于 babel 调用的文件,名为. babelrc
里面写入
- {
- "presets": ["es2015"]
- }
然后在当前目录打开 cmd,
运行命令 webpack
如果出现绿色的,证明成功了
然后去 bin 目录里面找到 app.bundle.js 发现里面下面会有这段代码
- function(module, exports) {
- "use strict";
- var a = 111;
- var b = 222;
- var xxx = function xxx(c, d) {
- return c * d;
- };
- console.log(xxx(a, b));
证明转码成功~~~~
来源: http://www.2cto.com/kf/201612/570701.html