webpack配置（第三步：ES6篇）

關於webpack的項目文件：https://gitee.com/codeFarmerPen/webpack

第一步：下載插件

輸入：

$ cnpm install babel-loader babel-core  babel-preset-env --save

會在項目目錄下的node_modules內下載  babel-loader babel-core  babel-preset-latest 三個文件，

第二步：添加配置

在webpack.config.js 文件下的moudule.loaders內添加：

{
    test: /(\.jsx|\.js)$/,
    loader: 'babel-loader',
    query: {
      presets: ['es2015']
    }
},

此時，整個文件內容爲：

project目錄：

 

webpack.config.js文件：

const path = require('path');

let export_html= {
    entry:  {
    	main:__dirname+"/app/js/main.js",//入口文件
    },
    output: {
        path: __dirname+"/_build/",
        filename: "js/[name].js",//產出文件，name根據entry的入口文件鍵名定
    },
    module: {
        loaders: [
			{
			    test: /(\.jsx|\.js)$/,
			    loader: 'babel-loader',
			    query: {
			      presets: ['env']
			    }
			},
        ]
    }
};
module.exports=export_html;

測試一下：

看看用一些 ES66的代碼，會不會轉碼 ES65

ES6：    這裏用let和es6的模板語法``來測試;

        

ES5:     能夠看到let變成了var ，下面的es6模板語法也解析爲：

            var a = "\n\t\t" + data.a + ",welcome to " + data.b + "!\n\t";

 

 測試成功！

 

下面是我關於webpack配置的全部連接

webpack配置（第一步：配置前提）：http://www.javashuo.com/article/p-zhierewo-eo.html

webpack配置（第二步：入門篇）：http://www.javashuo.com/article/p-zgertkmc-mq.html

webpack配置（第三步：ES6篇）：http://www.javashuo.com/article/p-yornwkpw-dt.html

webpack配置（第四步：html篇（基礎篇））：http://www.javashuo.com/article/p-ykguohhe-do.html

webpack配置（第四步：html篇（進階篇））：http://www.javashuo.com/article/p-nqgmvdah-hz.html

webpack配置（第四步：html篇（模板篇））：http://www.javashuo.com/article/p-cfrvmuzd-ea.html

webpack配置（第五步：less/css篇（基礎篇））：http://www.javashuo.com/article/p-ftegbnmw-p.html

webpack配置（第五步：less/css篇（進階篇））：http://www.javashuo.com/article/p-bkdzfetz-mx.html

webpack配置（第五步：less/css篇（url圖片篇））：http://www.javashuo.com/article/p-adtmrppc-mq.html