一、安装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. HDU 2710 Max Factor(数论,素数筛法)

    #include<iostream> #include<stdio.h> #include<string.h> #include<cmath> usin ...

  2. SQL Loader with utf8

    alter this line in your control file characterset UTF8 to this characterset UTF8 length semantics ch ...

  3. luogu P2024 食物链

    题目描述 动物王国中有三类动物 A,B,C,这三类动物的食物链构成了有趣的环形.A 吃 B,B 吃 C,C 吃 A. 现有 N 个动物,以 1 - N 编号.每个动物都是 A,B,C 中的一种,但是我 ...

  4. 【单调队列优化DP】BZOJ1855-[Scoi2010]股票交易

    [题目大意] 已知第i天的股票买入价为每股APi,第i天的股票卖出价为每股BPi(数据保证对于每个i,都有APi>=BPi),第i天的一次买入至多只能购买ASi股,一次卖出至多只能卖出BSi股. ...

  5. Java概述--Java开发实战经典

    1)Java有三个发展方向,分别是Java SE,Java EE,Java ME.以下简要介绍. a.Java SE,Java Standard Edition(java标准版),包含了构成java语 ...

  6. apk打包

    1.在导航栏中选择Builder->Generate Signed Apk 2.新建点击Creat new... 3.注意路径后面写apk的名字(这个名字将会显示在手机软件的下方)

  7. UITextField增加textDidChange回调功能

    在使用UITextField来判断登陆按钮状态时只有 shouldChangeCharactersInRange函数,是在文件还没有改变前就调用了,而不是在改变后调用,要想实现改变后调用的功能,导致登 ...

  8. Spring.NET的IoC容器(The IoC container)——简介(Introduction)

    简介 这个章节介绍了Spring Framework的控制反转(Inversion of Control ,IoC)的实现原理. Spring.Core 程序集是Spring.NET的 IoC 容器实 ...

  9. Word绘制跨行表格

    如图“用户评价电影数目”,我们需要均分第一行,选中这三个个,设置了表个高度0.5cm,但是发现上面的一个比较考上,我们需要找到水平竖直居中,那么双击表格,打开表格工具,有设计和布局,切换到布局就找到了 ...

  10. javascript 定时器 笔记

    最近想看下定时器,发现这东西越看越牵连的东西越多,比如js单线程,EVent loop 什么的 看到了几篇比较好的文章 http://ejohn.org/blog/how-javascript-tim ...