Webpack结合ES6
一、概述
ES6现在正是风华正茂的时候，各个公司都是 尝试去使用，并且作为前端工程师ES6也是体现技术的亮点。但是，现在的浏览器对es6支持不是 特别的兼容，最终还是需要把es6转换为es5，webpack使用babel-loader加载器进行转换，它的配置 也是非常的容易。
二、配置babel-loader
如果现在你的项目还没有对ES6的语法支持，那就有点没有逼格了，其实大家都知道这个也很简单，因为我们有伟大的Babel
首先 装各种loader
npm install babel-loader babel-preset-es2015 transform-loader --save-dev
然后配置加载器
var webpack = require('webpack');
var WebpackDevServer = require("webpack-dev-server");
var path = require('path');
var CURRENT_PATH = path.resolve(__dirname);
// 获取到当前目录
var ROOT_PATH = path.join(__dirname, '../');
// 项目根目录
var MODULES_PATH = path.join(ROOT_PATH, './node_modules');
// node包目录
var BUILD_PATH = path.join(ROOT_PATH, './dist');
// 最后输出放置公共资源的目录
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
//项目的文件夹 可以直接用文件夹名称 默认会找index.js ，也可以确定是哪个文件名字
entry: {
app: ['./src/js/index.js'],
vendors: ['jquery', 'moment'], //需要打包的第三方插件
login: ['./src/css/login.less']
},
//输出的文件名,合并以后的js会命名为bundle.js
output: {
path: path.join(__dirname, "dist/"),
publicPath: "http://localhost:8088/dist/",
filename: "bundle_[name].js"
},
module: {
loaders: [
// 把之前的style&css&less loader改为
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'postcss-loader'),
exclude: /node_modules/
}, {
test: /\.less$/,
exclude: /node_modules/,
loader: ExtractTextPlugin.extract('style', 'css!autoprefixer?{browsers: ["last 2 version", "IE 8", "Android 4.0", "iOS 6"]}!less?strictMath&noIeCompat!postcss')
},
{ test: /\.(png|jpg|gif|svg)$/, exclude: /node_modules/, loader: 'url?limit=8092' },
{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['es2015']}}
}]}
es2015这个参数是babel的plugin，可以支持各种最新的es6的特性。现在我们可以改掉CommonJS风格的文件了。
sub.js
export default function() {
var element = document.createElement('h2');
element.innerHTML = "Hello h2 world hahaha";
return element;}
index.js
var login=require('./login');
var data = require('data');
require('./../css/index.css');
require('./../css/login.less');
import generateText from './sub';
$("#welcome").html(generateText());
执行
webpack-dev-server --hot --inline
