Webpack combined with ES6

Source: Internet
Author: User
Tags postcss

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.