一、安装babel相关

1,安装依赖

cnpm i -D babel-core babel-loader babel-preset-env babel-preset-stage- babel-plugin-transform-runtime

2,新建.babelrc

{
presets: [
[
"env",
{
"targets": {
"browsers": ["last 5 versions", "ie >= 8"]
}
}
],
"babel-preset-stage-2"
],
plugins: [
'transform-runtime'
]
}

3,相关webpack.conf.js 片段

module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
},
]
}

二、安装静态资源全家桶(img/svg、字体图标、css/scss/style/postcss/autoprefixer)

1,安装依赖

cnpm i -D style-loader url-loader sass-loader node-sass css-loader autoprefixer-loader postcss-loader autoprefixer extract-text-webpack-plugin file-loader

# 神坑
npm rebuild node-sass

2,相关webpack.conf.js 片段

module: {
rules: [
{
test: /\.(scss|sass|css)$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: () => [autoprefixer({ browsers: ['iOS >= 7', 'Android >= 4.1'] })],
},
},
{
loader: 'sass-loader',
query: {
sourceMap: true
}
}
]
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
minetype: 'application/font-woff',
},
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
minetype: 'application/octet-stream',
},
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
minetype: 'application/vnd.ms-fontobject',
},
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
minetype: 'image/svg+xml',
},
},
{
test: /\.(png|jpg|jpeg|gif)(\?v=\d+\.\d+\.\d+)?$/i,
loader: 'url-loader',
options: {
limit: 10000,
},
}
]
},

webpack 环境搭建基础框架的更多相关文章

  1. webpack 环境搭建

    Webpack环境搭建 一.安装node 1.node官网下载node并安装----node里面内置了npm所以用在安装npm了 2.命令行输入node -v查看node是否安装成功 二.全局安装we ...

  2. TypeScript + Webpack 环境搭建

    TypeScript + Webpack 环境搭建步骤 安装Node.js 安装npm 创建一个npm项目 安装typescript,配置ts 安装webpack,配置webpack 初始化一个npm ...

  3. React+Webpack+ES6环境搭建(自定义框架)

    引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Nati ...

  4. 准备.Net转前端开发-WPF界面框架那些事,搭建基础框架

    题外话 最近都没怎么写博客,主要是最近在看WPF方面的书<wpf-4-unleashed.pdf>,挑了比较重要的几个章节学习了下WPF基础技术.另外,也把这本书推荐给目前正在从事WPF开 ...

  5. TestNG环境搭建以及框架初识

    TestNG的英文为Test Next Generation, 听上去好像下一代测试框架已经无法正常命名了的样子,哈哈,言归正传,啥是TestNG呢,它是一套测试框架,在原来的Junit框架的思想基础 ...

  6. webpack环境搭建

    环境搭建参考:Webpack+vue+element逐步搭建开发环境 webpack入门:http://www.jianshu.com/p/42e11515c10f ----------------- ...

  7. php开发环境搭建——laravel框架,apache服务器,git版本控制

    本文主要阐述做项目前的开发环境安装——后端为php,前端采用grunt进行自动化构建.具体介绍了windows平台下采用apache运行php的环境搭建,以及git工具安装.写得有点粗糙,但过程完整, ...

  8. 环境搭建基础知识2(sublime text3中配置verilog语法高亮)

    需求说明:Verilog设计 内容       :verilog开发环境搭建 来自       :时间的诗 1 软件下载 1.1 官方下载 地址http://www.sublimetext.com/3 ...

  9. node+webpack环境搭建 vue.js 2.0 基础学习笔记

    npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm install -g vue-cli //全局安装vue-c ...

随机推荐

  1. luogu P1359会议

    //以一号节点为根节点,求出所有节点到根结点的距离,以及所有点的子节点的个数 //然后计算根据已知信息计算所有节点到当前结点的距离 //然后扫描n个点,O(n)求解 #include<bits/ ...

  2. 13、Flask实战第13天:SQLAlchemy操作MySQL数据库

    安装MySQL 在MySQL官网下载win版MySQL 双击运行 后面根据提示设置密码然后启动即可,这里我设置的密码是:123456 我们可以通过Navicat客户端工具连接上MySQL addres ...

  3. ( 转 ) 数据库BTree索引、Hash索引、Bitmap位图索引的优缺点

    测试于:MySQL 5.5.25 当前测试的版本是Mysql 5.5.25只有BTree和Hash两种索引类型,默认为BTree.Oracle或其他类型数据库中会有Bitmap索引(位图索引),这里作 ...

  4. 调用上一个页面的js方法

    点击商品分类,弹出下框 点击确定,将选中的类别的name和唯一的code返回到上个页面 function save(){ var ids = getIdSelections(); jp.get(&qu ...

  5. 语言基础之description方法

    1.description方法的一般用处 1: // 指针变量的地址 2: NSLog(@"%p", &p); 3: // 对象的地址 4: NSLog(@"%p ...

  6. 高性能mysql读后感

    1. 事务里的写操作,四种隔离级别,都会加排他锁. 2. 事务里的读操作,前三种隔离级别,不会加锁,最后一种隔离级别,会加共享锁. 3. 上面的写.读操作,都是隐式加的锁.  可以自己显示对读操作进行 ...

  7. Ubuntu 16.04屏幕阅读Screen Reader导致快捷键失灵的问题解决

    开启和关闭快捷键:[Alt]+[Win]+[S] 如果关了之后开机还自动启动时,那么直接把它卸载: sudo apt-get remove gnome-orca killall orca 参考: ht ...

  8. C#将json字符串解析成对象

    首先我们在客户端生成json字符串,通过ajax把该字符串传到服务器端   //这是一个以id,email,age的json字符串   var jdata="[{\"id\&quo ...

  9. 常用 ARM 指令集及汇编

    ARM7TDMI(-S)指令集及汇编 ARM 处理器是基于精简指令集计算机(RISC)原理设计的,指令集和相关译码机制 较为简单,ARM7TDMI(-S)具有 32 位 ARM 指令集和 16 位 T ...

  10. [转]SVN安装问题The Apache Portable Runtime (APR) library cannot be found

    http://blog.csdn.net/ckwer2008/article/details/47972601 Linux很多地方编译的时候都会用到apr 如果找不到apr就会报错 configure ...