使用webpack打包ES6代码
来源:互联网 发布:怎么设计淘宝店标 编辑:程序博客网 时间:2024/06/04 18:09
安装nodejs
根目录下运行
npm init
根据提示输入项目相关信息,然后运行:
npm install
安装webpack
在项目根目录下运行
npm install webpack --save-dev
安装babel loader 和 转码规则
在根目运行命令:
npm install babel-loader --save-devnpm install babel-preset-es2015 --sava-dev //安装转码规则
babel loader 可以将ES6的代码编译成ES5
创建webpack配置文件
在源代码目录创建 webpack.config.js 文件,内容如下:
var path = require('path'); //加载nodejs的路径处理模块module.exports = { entry: './es6/index.js', output: { path: __dirname, //__dirname是一个nodejs变量,表示当前js文件所在的目录 filename: 'bundle.js' }, module: { loaders: [ { test: path.join(__dirname, 'es6'), //配置文件目录下的es6文件夹作为js源代码文件夹,所有源代码一定要放在该文件夹下 loader: 'babel-loader' , query: { presets: ['es2015'] } } ] }};
entry
和output
都是通用的配置,与ES6无关,这里不展开。重点在loaders
配置,loader
和query
一定要配置
注意:test配置指定了哪些是ES6代码,可以指定一个文件夹,则所有源代码一定要放在该文件夹下,或者用一个 正则表达式指定哪些是ES6代码。只有ES6代码,才会编译。
之后便可以编写ES6写法的js,打包运行了
参考文档
- 基于webpack使用ES6新特性
- 使用webpack进行ES6开发
- Webpack 中文指南
0 0
- 使用webpack打包ES6代码
- webpack 打包不支持 es6
- webpack-使用babel-loader转化ES6代码
- webpack 打包 + es6 + react入门(一)webpack打包
- 【webpack】使用webpack进行ES6开发
- 使用webpack 进行ES6开发
- 使用webpack进行打包
- 基于vue2 + vue-router + vuex + ES6 + less + flex.css重写vue版cnode社区,使用webpack打包
- 基于vue2 + vue-router + vuex + ES6 + less + flex.css重写vue版cnode社区,使用webpack打包
- webpack手动搭建 es6+less 开发环境和打包
- 使用 Webpack 和 ES6 进行 React 开发
- 使用webpack搭建react ES6开发环境
- webpack.config.js中使用ES6语法
- 使用webpack打包Vue工程
- 从零开始使用webpack打包工具
- 使用webpack打包vue工程
- webpack打包工具的使用
- 使用webpack打包脚本文件
- Fuschia 是什么样的一个操作系统
- mac下 svn 提交@2x图片报错解决方法
- BZOJ4580 [Usaco2016 Open]248
- Distributional Vector VS. Distributed Vector
- linux下全目录全文搜索强大工具grep
- 使用webpack打包ES6代码
- python学习笔记(四)
- faster rcnn训练过程内存占用
- 【2016-08-15】spring 的一些注解
- android studio checkout svn 后无更新提交图标
- C#窗体退出事件提示对话框解决方案
- Codeforces Round #344 (Div. 2)C. Report
- Codeforces Round #290 (Div. 2)B. Fox And Two Dots(dfs)
- 【CodeForces】508C - Anya and Ghosts(贪心 & 模拟)