webpack编译es6

1 安装

已安装npm前提下,先全局后在使用的文件夹下安装局部,npm init 初始化package.json

npm install webpack --save-dev

2 测试

         

运行后生成b.js

运行除了直接webpack命令,还可以修改package.json里面,在scripts里添加 "start":"webpack",然后npm start就可以了,npm run start一样,跟vue-cli全家桶的npm run dev一样的

报错详细,可以用webpack --display-error-details

3 配置webpack.config.js

更详细参见:http://webpack.github.io/docs/configuration.html

当入口不直接写根目录下文件时,报错,报入口模块未找到

其实是路径问题,用上 __dirname就可以了

  3-1 多个js文件编译

    json,前是名称

    3-1-1      

    3-1-2                         

      文件合并编译了

4 编译es6 ==> es5

npm install babel-core

     babel-loader

     babel-preset-es2015       --save-dev

配置下文件,然后就可以编译es6了

5 本地服务器

查看有无webpack-dev-server,可能是我之前全局安装过或还是这个版本就有的,然后之前的webpack改成webpack-dev-server (--progress --colors)括号里面的我不知道是啥意思,没发现作用

启动服务器跟编译没关系的??!

时间: 2024-09-29 08:36:11

webpack编译es6的相关文章

webpack 编译ES6插件babel-loader

1.安装babel-loader 参考:http://babeljs.io/docs/setup/#installation 进入项目目录执行安装命名: npm install --save-dev babel-loader babel-core npm install --save-dev babel-preset-latest babel-preset-latest 就是把所有es2015, es2016, es2017 全部包含在一起了. 2.项目结构: app.js代码为: import

webpack如何编译ES6打包

前言:随着ES的普及我们越来越多的开始使用ES6的语法了,当然也随着mvvm框架的流行少不了js模块化,那js模块化又有那些呢 在很早的时候大家都用的命名空间,现在也有人用(库名.类别名.方法名) 后来出现了CommonJS.AMD.CMD.UMD,现在流行ES 6 module CommonJS的基本介绍: 一个文件为一个模板,通过module.exports暴露模块接口,通过require引入模块,同步执行 规范:http://wiki.commonjs.org/wiki/Modules/1

webpack+babel+ES6+react环境搭建

webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app目录 用来存放项目源文件 mkdir dist // 创建dist目录 用来存放打包好的文件 touch .gitignore //创建.gitignore 用来添加git 忽略的文件 touch webpack.config.js //创建webpack的配置文件 cd app //进入到app目

Webpack+Vue+ES6 前端组件化开发mobile-multi-page应用实战总结

本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws 一.写在前面 项目上线有一段时间了,一个基于webpack+vue+ES6的手机端多页面应用.其实说是多页面应用,实际上在webpack中属于四个app,  如果真是做纯单页面,那应该有二三十个页面吧.所以我这里的多页面应用,是分为四个SPA.比如微信最下面,有四个导航,微信,通讯录,发现,我. 那么这四个导航,就是我的四个SPA,配置多个入口即可. 在这里就不说太多代码了,项目结构将会放

用 Webpack 和 ES6 转换快速开发 Rails 的富客户端

Fast Rich Client Rails Development With Webpack and the ES6 Transpiler 有更好的方式把 JavaScript 生态引入 Rails. 你有没有: 想知道是否有更好的方式在现有 Ruby on Rails 工程下使用现代 JavaScript 客户端框架? 烦恼怎样整合那些被打包成"模块"的 JavaScript 库和例子? 发现在全局命名空间下乱挂垃圾的弊端. 听说过 ES6 (又叫 Harmony),下一代 Jav

gulp打包js多个文件夹并压缩混淆,编译ES6语法

感觉和webpack的步骤差不多 首先安装gulp:参考上一篇 安装完之后 新建一个文件目录起名 在当前目录下打开cmd 执行:npm init 创建package.json文件 然后安装第一个插件gulp-uglify 执行: cnpm install gulp-uglify --save-dev (这里暂时都用淘宝镜像cnpm) 这时候已经可以开始压缩es5的js文件了,但是我们要编译es6语法,那就需要babel 执行: cnpm install gulp-babel --save-dev

webpack + react + es6, 并附上自己碰到的一些问题

最近一直在学react,react的基础部分已经学得差不多了,然而自己并没有做详细的记录,有兴趣的同志可以参考阮一峰老师的教程,个人觉得挺不错的,链接如下:https://github.com/ruanyf/react-babel-webpack-boilerplate, 学完了基础就想倒腾倒腾,webpack整合react加es6. 1.webpack + react + es6 1.1 新建项目 项目目录如下 具体的内容就不解释了,大家应该都看得懂 1.2 配置webpack 配置文件如下

关于webpack编译scss文件

css加载器文件通常和extract-text-webpack-plugin一块使用,我们可以在源文件src目录下写scss文件,然后通过webpack编译成css文件到输出目录public,这个目录就是我们网站需要引用的目录. 1 var webpack = require('webpack'); 2 var HtmlWebpackPlugin = require('html-webpack-plugin'); 3 var ExtractTextWebpackPlugin = require(

gulp 编译es6 react 教程 案例 配置

1.gulp基本配置: var gulp = require('gulp'), watch = require('gulp-watch'), babel = require('gulp-babel'); var browserify = require('gulp-browserify'); var SourceMap = require('gulp-sourcemaps'); var SourceMapSupport = require('gulp-sourcemaps-support');