WebPack uses Babel-Loader Conversion ES6 Code Example

This article introduces WebPack to use Babel-Loader to convert ES6 code examples, share it to everyone, as follows:

Query the use of each Loader, you can query on the official website. Https://www.npmjs.com

(1) Install Babel-Loader, Babel-Core.

using the command

  npm install --save-dev babel-loader babel-core  

Because ES6 syntax is updated every year, we need a certain rule to transform.

NPM INSTALL –SAVE-DEV Babel-Preset-Latest
   (2) First follow following the establishment of the file hierarchy 

ES6 code placed app.js test, using CMD syntax embedded object layer in the layer. App.js code is as follows.

webpack使用 babel-loader 转换 ES6代码示例 Import Layer from ‘./components/layer/layer.js’; Console.log (Layer); NEW APP ();

Layer.js code is as follows
   function layer () {return {name: 'layer', TPL: 'TE(3) 
(3) WebPack.Config.js code is as follows

  VAR htmlwebpackplugin = Require ('html-webpack-plugin'); var path = request ('PATH'); console.log (__ DIRNAME); module.exports = {/ * context: __dirname, * / entry : './src/app.js', output: {path: './dist', filename: 'js / [name] -Bound.js' // The generated file named A-2EA5B2E9B258A8BBBA73.JS, Main -2ea5b2e9b258a8bbba73.js}, module: {loadingers: [{test: /\.js $/, loader: 'Babel-loader', / * exclude: path.resolve (__ DIRNAME, 'Node_Modules'), // Compile, Don't compile which files * / / * include: path.resolve (__ DIRNAME, 'SRC'), // View which files need to be included in Config * / query: {pretets: ['Latest'] // The latest ES6 grammar rules to transform}}]}, plugins: [New HTMLWebPackPlugin ({filename: 'index.html', // generated by template template: 'index.html', // template path inject: 'body' // is automatically generated in template file to add an automatically generated JS file Link})]};  
The above is all the contents of this article, I hope that everyone’s learning is helpful, I hope everyone supports Tumi Cloud.

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment