Webpack combined with ES6

I. Overview

ES6 is now in its prime, companies are trying to use, and as a front-end engineer ES6 is also the highlight of Technology. however, the current browser is not particularly compatible with ES6 support, and ultimately the need to convert ES6 to Es5,webpack using the babel-loader loader for conversion, its configuration is very easy.


second, the configuration Babel-loader


If you do not have the ES6 grammar support now, It is a little bit of force, in fact, we all know this is also very simple, because we have a great Babel

Start with a variety of loader

NPM Install Babel-loader babel-preset-es2015 Transform-loader--save-dev

Then configure the loader

varWebpack = require (' webpack '));varWebpackdevserver = Require ("webpack-dev-server");varPath = require (' path ');varCurrent_path =path.resolve (__dirname);//get to current directoryvarRoot_path = Path.join (__dirname, ' ... /‘);//Project root directoryvarModules_path = Path.join (root_path, './node_modules ');//Node Package directoryvarBuild_path = Path.join (root_path, './dist ');//final output directory where public resources are placedvarHtmlwebpackplugin = require (' html-webpack-plugin '));varExtracttextplugin = Require ("extract-text-webpack-plugin");varCopywebpackplugin = require (' copy-webpack-plugin ')); module.exports= {        //the folder name of the project can be index.js directly by default, or it can be determined which file nameentry: {app: ['./src/js/index.js '], Vendors: [' jquery ', ' moment '],//Third-party plugins that need to be packagedLogin: ['./src/css/login.less ']        },        //the file name of the output, the merged JS will be named Bundle.jsoutput: {path:path.join (__dirname,"dist/"), publicpath:"http://localhost:8088/dist/", Filename:"bundle_[name].js"}, module: {loaders: [//Change the previous style&css&less loader to{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 This parameter is Babel plugin, which can support the various latest ES6 Features. Now we can get rid of the Commonjs style Files.

Sub.js

default function () {  var element = document.createelement (' H2 ');   = "Hello H2 World hahaha";   return element;}

Index.js

var login=require ('./login '); var data = require (' data '); require ('./... /css/index.css '); require ('./... /css/login.less './sub '; $ ("#welcome"). HTML (generatetext ());

Perform

Webpack-dev-server--hot--inline

Webpack combined with ES6