分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

webpack 编译ES6插件babel-loader

发布时间:2023-09-06 01:11责任编辑:傅花花关键词:webpack编译

1、安装babel-loader

参考:http://babeljs.io/docs/setup/#installation

进入项目目录执行安装命名:

npm install --save-dev babel-loader babel-corenpm install --save-dev babel-preset-latest
babel-preset-latest 就是把所有es2015, es2016, es2017 全部包含在一起了。

2、项目结构:

app.js代码为:

import layer from ‘./components/layer/layer.js‘const App = function(){ ???const NUM=1; ???alert(NUM); ???console.log(layer)}new App()

3、webpack.config.js 配置文件为

var htmlWebpackPlugin = require(‘html-webpack-plugin‘);module.exports = { ???entry: ‘./src/app.js‘, ???output: { ???????path: __dirname + ‘/dist‘, ???????filename: ‘js/[name].js‘ ???}, ???module: { ???????loaders: [{ ???????????????test: /\.js$/, ???????????????//以下目录不处理 ???????????????exclude: /node_modules/, ???????????????//只处理以下目录 ???????????????include: /src/, ???????????????????????????????loader: "babel-loader", ???????????????//配置的目标运行环境(environment)自动启用需要的 babel 插件 ???????????????query: { ???????????????????presets: [‘latest‘] ???????????????} ???????????} ???????] ???}, ???plugins: [ ???????new htmlWebpackPlugin({ ???????????template: ‘index.html‘, ???????????filename: ‘index.html‘ ???????}) ???]}

4、执行命令

npm run webpack

5、编辑后的结果

webpack 编译ES6插件babel-loader

原文地址:http://www.cnblogs.com/mengfangui/p/7520766.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved