安装nodejs

根目录下运行

 npm init

根据提示输入项目相关信息，然后运行：

npm install

安装webpack

在项目根目录下运行

npm install webpack --save-dev

安装babel loader 和转码规则

在根目运行命令：

npm install babel-loader --save-dev
npm 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 中文指南

使用webpack打包ES6代码相关推荐

webpack打包ES6降级ES5
Babel是一个广泛使用的转码器,babel可以将ES6代码完美地转换为ES5代码,所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性. 安装babel实现ES6到ES5 npm instal ...
webpack打包样式代码去重
一.问题描述控制台审查样式,同一个样式被导入很多遍,每调用一次@import "common.less";打包时都会多出一份类似的样式代码. 二.问题分析补上... 三.解决方 ...
webpack 打包第三方库_Webpack 打包第三方代码库
共四篇文章都是在总结 Webpack.其中,[译]为什么要 Webpack 写了使用 Webpack 的动机和它的显著特征.其余三篇,主要是围绕怎么解决 Webpack 构建出来的文件太大展开,分别是 ...
webpack 打包（plugin、loader 工作原理）
模块化工具由来 ES Modules 存在环境兼容问题模块文件过多,网络请求频繁所有的前端资源都需要模块化概要 Webpack 作为模块打包器(Module bundler),可以把零散的文 ...
webpack打包缓存_【第835期】Webpack 的静态资源持久缓存
原标题:[第835期]Webpack 的静态资源持久缓存前言你现在还在休假吗?早读课节前以web pack漫谈结尾,今年就以web pack开始吧.今日早读文章由众成翻译@yanni4night带 ...
webpack打包转换es6_webpack（二）解析es6并打包
一.前言 ECMAScript 6(ES6)的发展速度非常之快,但现代浏览器对ES6新特性支持度不高,所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现. Babel是一个广泛使用的转码器 ...
LiveQing视频流媒体开放平台利用 webpack 打包压缩后端代码
需求背景 JavaScript 是脚本语言, 没有编译过程, 直接以源码就可以运行. 有的时候, 出于安全或者其他的原因, 我们不希望别人直接读到源码, 或者很容易对源码做出修改使用. 这个时候, 就 ...
webpack打包生成的map文件_一站式搞明白webpack中的代码分割
上次分析到通过devtool的配置项来设置source map,在线上环境可以通过设置成cheap-module-source-map来生成单独的map文件,但是map文件在线上环境会不会每次都加载呢 ...
使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室
拿到一个项目,我们应该如何去完成这个项目呢. 是直接上手? 还是先进行分析,然后再去解决呢?毫无疑问,如果直接上手解决,那么可能会因为知道目标所在,而导致出现各种问题. 所以,我们应该系统的分析这个项 ...

使用webpack打包ES6代码

安装nodejs

安装webpack

安装babel loader 和转码规则

创建webpack配置文件

参考文档

使用webpack打包ES6代码相关推荐

最新文章

热门文章

使用webpack打包ES6代码

安装nodejs

安装webpack

安装babel loader 和 转码规则

创建webpack配置文件

参考文档

使用webpack打包ES6代码相关推荐

最新文章

热门文章

安装babel loader 和转码规则