安装

cnpm i babel-core@6.26.3 babel-loader@7.0.0 babel-plugin-transform-runtime -D

cnpm i babel-preset-env babel-preset-stage-0 -D

main.js 文件

import $ from 'jquery'
import './css/index.css'
import './css/index.scss'
// 如果要通过路径的形式,去引入node_modules中相关的文件,可以直接省略路径前面的node_modules这一层目录
//直接写包的名称,然后后面跟上具体的文件路径。
import 'bootstrap/dist/css/bootstrap.css' // class关键字,是ES6中提供的新语法,是用来实现ES6中面向对象编程的方式
// java c# 实现面向对象的方式完全一样,class是从后端语言中借鉴过来的
class Person{
// 使用static关键字,可以定义静态属性
// 所谓的静态属性,就是可以直接通过类名直接访问的属性。
// 实例属性:只能通过类的实例来访问的属性叫实例属性
static info = { name : 'li' , age : 20}
}
// 访问Person类身上的info静态属性。
console.log(Person.info)
// 在webpack中。默认只能处理一部分ES6的新语法,一些更高级的ES6语法处理不了。需要借助第三方的loader
// 把高级语法转为低级的语法后会把结果交给webpack打包的bundle.js
// 通过 Babel,可以将高级语法转换为低级语法
// 1, 在webpack中可以运行如下两套命令,安装两套包,去安装Babel相关的loader功能
// 1.1, 第一套包 cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
// 1.2, 第二套包 cnpm i babel-preset-env babel-preset-stage-0 -D
// 2. 打开webpack的配置文件,在module节点下的rules数组中,添加一个新的匹配规则
// 2.1 { test:/\.js$/,use:'babel-loader',exclude:/node_modules/ }
// 2.2 在配置babel的loader规则的时候,必须把node_modules目录通过exclude选项排除掉。
// 3, 在项目的根目录中,新建一个叫做 .babelrc 的Babel配置文件,这个文件属于json格式,所以在写
// babel必须遵守json语法规范,不能写注释
// 3.1 在 .babelrc 写如下配置
// {
// "presets" : ["env","stage-0"], //presets语法的意思
// "plugins" : ["transform-runtime"]
// } var p1 = new Person()

webpack.config.js 文件

const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {
entry : path.join(__dirname,'./src/main.js'),
output : {
path : path.join(__dirname,'./dist'),
filename : 'bundle.js'
},
plugins : [
new htmlWebpackPlugin({
template : path.join(__dirname,'./src/index.html'),
filename : 'index.html'
})
],
module : {
rules : [
{test:/\.css$/,use:['style-loader','css-loader']},
{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
// 处理图片路径的loader. loader可以传参跟url传参一样
// limit给定的值是图片的大小,单位是byte,如果引用的图片大于或等于给定的limit值,则不会
// 被转为base64格式的字符串,如果图片小于给定的limit值,则会被转为base64格式的字符串。
// [hash:8]-在每个图片前加8位的哈希值.从32位哈希值取前8位。配置最大32
{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=1000&name=[hash:8]-[name].[ext]'},
{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},//这是处理字体文件的配置
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/} //配置babel来转换es6语法
]
}
}

运行项目 后报错。版本不对, npm view babel-loader versions查看所有 版本号

这里要求如果使用babel-core版本为6.x , 那就必须得要使用7.x的babel-loader。卸载重新指定版本安装即可。

Vue系列之 => webpack-babel的配置的更多相关文章

  1. Vue系列之 => webpack结合vue使用

    安装 npm i vue -S ,  在html页面中放一个容器绑定到el上. 修改webpack.config.js , 在与entry , output节点平级加上 resolve 节点. res ...

  2. Vue系列之 => webpack的url loader

    安装: npm i url-loader file-loader -D  //url-loader内部依赖file-loader webpack.config.js const path = requ ...

  3. Vue系列之 => webpack处理样式文件

    处理css文件 安装 npm i style-loader css-loader -D main.js import $ from 'jquery' //Es6中导入模块的方式 import './c ...

  4. Vue系列之 => webpack基础使用

    webpack安装方式 1,运行 npm i webpack -g 全局安装. 2,在项目根目录中运行 npm i webpack --save-dev 安装到项目依赖中 项目目录 进入src运行, ...

  5. vue系列之webpack

    webpack 地址: https://github.com/vuejs-templates/webpack 注意里面的template,用webpack创建的项目,结构就是这样的

  6. Vue学习笔记-nodejs+vue-cli4+webpack按装配置+项目创建

    一  使用环境: windows 7 64位操作系统 二  Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nodejs的官网下载  https: ...

  7. [转] vue&webpack多页面配置

    前言 最近由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求. html-we ...

  8. VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  9. vue项目中postcss-pxtorem的使用及webpack中的配置 css中单位px和em,rem的区别

    移动手机版要求我们在制作嵌入h5的时候去适配不同的手机.适配有多重模式,有flex.百分比等.字体大小的控制也有px.百分比.rem等单位,webpack中 px转rem. vue项目中postcss ...

  10. vue&webpack多页面配置

    前言 最近由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求. html-we ...

随机推荐

  1. Tomcat 本地运行正常,服务器部署后乱码问题

    Tomcat 在本地运行项目没啥问题,可是部署到服务器后就会发现有乱码的问题,这问题还是一半一半的,有些有,有些没有,这不是接收数据的时候会出现的乱码,是后台管理的页面中文乱码,我也是醉了, 把解决方 ...

  2. Fragment基础操作

    Fragment和Activity类似,同样是具备UI的属性:也就是都能用于规划UI布局... Building a Dynamic UI with Fragments --> Fragment ...

  3. hadoop2集群环境搭建

    在查询了很多资料以后,发现国内外没有一篇关于hadoop2集群环境搭建的详细步骤的文章. 所以,我想把我知道的分享给大家,方便大家交流. 以下是本文的大纲: 1. 在windows7 下面安装虚拟机2 ...

  4. flask之wtforms

    本篇导航: wtforms组件的使用 自定义From组件 一.wtforms组件的使用 1.flask中的wtforms WTForms是一个支持多个web框架的form组件,主要用于对用户请求数据进 ...

  5. 动态规划-数位DPwindy

    https://vjudge.net/contest/297216?tdsourcetag=s_pctim_aiomsg#problem/L #include<bits/stdc++.h> ...

  6. php中的public、protected、private三种访问控制模式及self和parent的区别(转)

    php的public.protected.private三种访问控制模式的区别 public: 公有类型 在子类中可以通过self::var调用public方法或属性,parent::method调用 ...

  7. 【java】i++与++i、i--运算

    package test; //i++与--i运算 public class test { public static void main(String[] args) { int b=0; int ...

  8. Servlet.service() for servlet [jsp] in context with path [/Healthy_manager] threw exception [Unable to compile class for JSP] with root cause java.lang.IllegalArgumentException: Page directive: inval

    严重: Servlet.service() for servlet [jsp] in context with path [/Healthy_manager] threw exception [Una ...

  9. js如何判断数字是否有小数

    //如果是5.00之类的,转换后,应该不要小数点后的位数 let num = 5.34; //let num = 5.00; let arr = num .toString().split(" ...

  10. nvwgf2umx.dll 显卡崩溃问题尝试修复

    问题背景 游戏上线之后,搜集到的奔溃列表里面列表存在大量的显卡驱动异常崩溃,window在vista之后,将显卡驱动模型从Xpdm改为了WDDM. WDDM的说明详见百度百科,其中最主要的变更如下: ...