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 ...
随机推荐
- HDU 2710 Max Factor(数论,素数筛法)
#include<iostream> #include<stdio.h> #include<string.h> #include<cmath> usin ...
- SQL Loader with utf8
alter this line in your control file characterset UTF8 to this characterset UTF8 length semantics ch ...
- luogu P2024 食物链
题目描述 动物王国中有三类动物 A,B,C,这三类动物的食物链构成了有趣的环形.A 吃 B,B 吃 C,C 吃 A. 现有 N 个动物,以 1 - N 编号.每个动物都是 A,B,C 中的一种,但是我 ...
- 【单调队列优化DP】BZOJ1855-[Scoi2010]股票交易
[题目大意] 已知第i天的股票买入价为每股APi,第i天的股票卖出价为每股BPi(数据保证对于每个i,都有APi>=BPi),第i天的一次买入至多只能购买ASi股,一次卖出至多只能卖出BSi股. ...
- Java概述--Java开发实战经典
1)Java有三个发展方向,分别是Java SE,Java EE,Java ME.以下简要介绍. a.Java SE,Java Standard Edition(java标准版),包含了构成java语 ...
- apk打包
1.在导航栏中选择Builder->Generate Signed Apk 2.新建点击Creat new... 3.注意路径后面写apk的名字(这个名字将会显示在手机软件的下方)
- UITextField增加textDidChange回调功能
在使用UITextField来判断登陆按钮状态时只有 shouldChangeCharactersInRange函数,是在文件还没有改变前就调用了,而不是在改变后调用,要想实现改变后调用的功能,导致登 ...
- Spring.NET的IoC容器(The IoC container)——简介(Introduction)
简介 这个章节介绍了Spring Framework的控制反转(Inversion of Control ,IoC)的实现原理. Spring.Core 程序集是Spring.NET的 IoC 容器实 ...
- Word绘制跨行表格
如图“用户评价电影数目”,我们需要均分第一行,选中这三个个,设置了表个高度0.5cm,但是发现上面的一个比较考上,我们需要找到水平竖直居中,那么双击表格,打开表格工具,有设计和布局,切换到布局就找到了 ...
- javascript 定时器 笔记
最近想看下定时器,发现这东西越看越牵连的东西越多,比如js单线程,EVent loop 什么的 看到了几篇比较好的文章 http://ejohn.org/blog/how-javascript-tim ...