webpack 环境搭建基础框架
一、安装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 环境搭建基础框架的更多相关文章
- webpack 环境搭建
Webpack环境搭建 一.安装node 1.node官网下载node并安装----node里面内置了npm所以用在安装npm了 2.命令行输入node -v查看node是否安装成功 二.全局安装we ...
- TypeScript + Webpack 环境搭建
TypeScript + Webpack 环境搭建步骤 安装Node.js 安装npm 创建一个npm项目 安装typescript,配置ts 安装webpack,配置webpack 初始化一个npm ...
- React+Webpack+ES6环境搭建(自定义框架)
引言 目前React前端框架是今年最火的.而基于React的React Native也迅速发展.React有其独特的组件化功能与JSX的新语法,帮助前端设计有了更好的设计与便捷,而React Nati ...
- 准备.Net转前端开发-WPF界面框架那些事,搭建基础框架
题外话 最近都没怎么写博客,主要是最近在看WPF方面的书<wpf-4-unleashed.pdf>,挑了比较重要的几个章节学习了下WPF基础技术.另外,也把这本书推荐给目前正在从事WPF开 ...
- TestNG环境搭建以及框架初识
TestNG的英文为Test Next Generation, 听上去好像下一代测试框架已经无法正常命名了的样子,哈哈,言归正传,啥是TestNG呢,它是一套测试框架,在原来的Junit框架的思想基础 ...
- webpack环境搭建
环境搭建参考:Webpack+vue+element逐步搭建开发环境 webpack入门:http://www.jianshu.com/p/42e11515c10f ----------------- ...
- php开发环境搭建——laravel框架,apache服务器,git版本控制
本文主要阐述做项目前的开发环境安装——后端为php,前端采用grunt进行自动化构建.具体介绍了windows平台下采用apache运行php的环境搭建,以及git工具安装.写得有点粗糙,但过程完整, ...
- 环境搭建基础知识2(sublime text3中配置verilog语法高亮)
需求说明:Verilog设计 内容 :verilog开发环境搭建 来自 :时间的诗 1 软件下载 1.1 官方下载 地址http://www.sublimetext.com/3 ...
- node+webpack环境搭建 vue.js 2.0 基础学习笔记
npm install -g vue //全局安装vue npm install -g webpack //全局安装webpack npm install -g vue-cli //全局安装vue-c ...
随机推荐
- luogu P1359会议
//以一号节点为根节点,求出所有节点到根结点的距离,以及所有点的子节点的个数 //然后计算根据已知信息计算所有节点到当前结点的距离 //然后扫描n个点,O(n)求解 #include<bits/ ...
- 13、Flask实战第13天:SQLAlchemy操作MySQL数据库
安装MySQL 在MySQL官网下载win版MySQL 双击运行 后面根据提示设置密码然后启动即可,这里我设置的密码是:123456 我们可以通过Navicat客户端工具连接上MySQL addres ...
- ( 转 ) 数据库BTree索引、Hash索引、Bitmap位图索引的优缺点
测试于:MySQL 5.5.25 当前测试的版本是Mysql 5.5.25只有BTree和Hash两种索引类型,默认为BTree.Oracle或其他类型数据库中会有Bitmap索引(位图索引),这里作 ...
- 调用上一个页面的js方法
点击商品分类,弹出下框 点击确定,将选中的类别的name和唯一的code返回到上个页面 function save(){ var ids = getIdSelections(); jp.get(&qu ...
- 语言基础之description方法
1.description方法的一般用处 1: // 指针变量的地址 2: NSLog(@"%p", &p); 3: // 对象的地址 4: NSLog(@"%p ...
- 高性能mysql读后感
1. 事务里的写操作,四种隔离级别,都会加排他锁. 2. 事务里的读操作,前三种隔离级别,不会加锁,最后一种隔离级别,会加共享锁. 3. 上面的写.读操作,都是隐式加的锁. 可以自己显示对读操作进行 ...
- Ubuntu 16.04屏幕阅读Screen Reader导致快捷键失灵的问题解决
开启和关闭快捷键:[Alt]+[Win]+[S] 如果关了之后开机还自动启动时,那么直接把它卸载: sudo apt-get remove gnome-orca killall orca 参考: ht ...
- C#将json字符串解析成对象
首先我们在客户端生成json字符串,通过ajax把该字符串传到服务器端 //这是一个以id,email,age的json字符串 var jdata="[{\"id\&quo ...
- 常用 ARM 指令集及汇编
ARM7TDMI(-S)指令集及汇编 ARM 处理器是基于精简指令集计算机(RISC)原理设计的,指令集和相关译码机制 较为简单,ARM7TDMI(-S)具有 32 位 ARM 指令集和 16 位 T ...
- [转]SVN安装问题The Apache Portable Runtime (APR) library cannot be found
http://blog.csdn.net/ckwer2008/article/details/47972601 Linux很多地方编译的时候都会用到apr 如果找不到apr就会报错 configure ...