webpack使用 babel-loader 转换 ES6代码示例
本文介绍了webpack使用 babel-loader 转换 ES6代码示例，分享给大家，具体如下：
查询各个 loader的使用，可以在官网上查询。https://www.npmjs.com
（一）安装 babel-loader，babel-core。
使用命令
npm install --save-dev babel-loader babel-core
因为ES6语法每年都在更新，因此，我们需要一定的规则去转换。
npm install --save-dev babel-preset-latest
（二）首先按照如下层级建立相应文件
将测试用的ES6代码放在 app.js,使用CMD语法，将layer嵌入对象layer中。app.js代码如下。
import layer from './components/layer/layer.js';
const App = function () {
console.log(layer);
}
new App();
layer.js代码如下
function layer(){
return{
name:'layer',
tpl:'testTpl'
};
}
export default layer;
(三）webpack.config.js代码如下
var htmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
console.log(__dirname);
module.exports = {
/*context: __dirname,*/
entry: './src/app.js',
output: {
path: './dist',
filename: 'js/[name]-bound.js'//生成后的文件名 为 a-2ea5b2e9b258a8bbba73.js，main-2ea5b2e9b258a8bbba73.js
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
/*exclude: path.resolve(__dirname, 'node_modules'), //编译时，不需要编译哪些文件*/
/*include: path.resolve(__dirname, 'src'),//在config中查看 编译时，需要包含哪些文件*/
query: {
presets: ['latest'] //按照最新的ES6语法规则去转换
}
}
]
},
plugins: [
new htmlWebpackPlugin({
filename: 'index.html', //通过模板生成的文件名
template: 'index.html',//模板路径
inject: 'body' //是否自动在模板文件添加 自动生成的js文件链接
})
]
};
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。
-
热模块更换工作没有加载器，另一个加载器，或另一个预设。 但它不能与巴贝尔-装载机和预置的ES2015。es2016工作。预置“env”也有同样的问题。 是否有可能用es2015或ENV替换webpack热模块？ 以下是我的文件： webpack.config.js print.js index.html package.json index.js .巴贝尔c
-
我试图转换我的jsx代码到js使用巴贝尔。 巴贝尔——预设es2015，react——缩小版finan。js-o/已编译/已编译。js 错误：在Function中找不到模块js令牌。模块。_resolveFilename（module.js:325： 15）在函数。模块。_load（module.js:276： 25）在Module.require（module.js:353： 17）在要求（内部
-
本文向大家介绍webpack Webpack，React JSX，Babel，ES6，简单配置，包括了webpack Webpack，React JSX，Babel，ES6，简单配置的使用技巧和注意事项，需要的朋友参考一下 示例 确保您安装了正确的npm依赖项（babel决定将其自身拆分为一堆软件包，与“对等依赖项”有关）： npm install webpack webpack-node-ext
-
This README is for babel-loader v8 + Babel v7If you are using legacy Babel v6, see the 7.x branch docs Babel Loader This package allows transpiling JavaScript files using Babel and webpack. Note: Issu
-
这样一段ES6的代码, 如何查看babel 转换为ES5之后的结果? 在这个网站 demo 如何配置 babel将代码转为es5 有没有其他playground 能查看转换后的结果 ===================
-
我正在静态站点上使用本机es6模块。 在部署之前，我通过Babel传递js文件 //网页包。配置。js //. babelrc 默认情况下，babel会将模块转换为公共js，尽管我的代码中有一个标志“modules”：false。巴别塔 我不想让babel把模块变成通用的，我只想把除了导入和导出之外的所有东西都变成es2015，这样我就可以在浏览器中使用原生模块了 像这样：//main.js之前