webpack3.0 环境搭建
额、备份一下总是好的
#为了避免某些国外镜像源安装失败,先设置淘宝镜像代理
yarn config set registry https://registry.npm.taobao.org # 初始化yarn
yarn init -y # 添加webpack
yarn add webpack # 添加webpack插件
yarn add html-webpack-plugin
yarn add webpack-dev-server
yarn add extract-text-webpack-plugin # 添加webpack-loader
yarn add style-loader css-loader node-sass sass-loader
yarn add url-loader
yarn add file-loader
yarn add postcss-loader autoprefixer # 添加babel插件
yarn add babel-preset-react
yarn add babel-loader babel-core # react相关
yarn add react react-dom
yarn add react-router react-router-dom
yarn add redux redux-thunk redux-saga react-redux
yarn add react-router-redux@next history # 蚂蚁金服的UI框架:Ant Design
yarn add antd # 添加第三方库
yarn add axios
配置webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const autoprefixer = require('autoprefixer') module.exports = {
entry: {
main: __dirname + '/src/main.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'assets/js/[name].js'
},
devtool: 'source-map',
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader',
options: {
limit: 10000,
minetype: 'application/font-woff',
},
},
{
test: /\.woff2(\?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,
},
},
{
test: /\.(scss|sass|css)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader' },
{
loader: 'postcss-loader',
options: {
sourceMap: true,
plugins: () => [autoprefixer({ browsers: ['iOS >= 7', 'Android >= 4.1'] })],
},
},
{
loader: 'sass-loader',
query: {
sourceMap: true
}
}
]
})
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'my title',
filename: __dirname + '/dist/index.html',
template: __dirname + '/index.html',
chunks: ['main']
}),
new ExtractTextPlugin('assets/css/[name].css')
],
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}
}
配置.babelrc
{
"presets": ["react"],
"plugins": [
["import", { "libraryName": "antd", "style": "css" }]
]
}
配置package.json,加入scripts
{
...
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server"
}
}
webpack3.0 环境搭建的更多相关文章
- ubantu16.04+mxnet +opencv+cuda8.0 环境搭建
ubantu16.04+mxnet +opencv+cuda8.0 环境搭建 建议:环境搭建完成之后,不要更新系统(内核) 转载请注明出处: 微微苏荷 一 我的安装环境 系统:ubuntu16.04 ...
- 菜鸟学自动化测试(八)----selenium 2.0环境搭建(基于maven)
菜鸟学自动化测试(八)----selenium 2.0环境搭建(基于maven) 2012-02-04 13:11 by 虫师, 11419 阅读, 5 评论, 收藏, 编辑 之前我就讲过一种方试来搭 ...
- XNA 4.0 环境搭建和 Hello World,Windows Phone 游戏开发
XNA 4.0 环境搭建和 Hello World,Windows Phone 游戏开发 使用 Scene 类在 XNA 中创建不同的场景(八) 摘要: 平方已经开发了一些 Windows Phone ...
- (win10 64位系统中)Visual Studio 2015+OpenCV 3.3.0环境搭建,100%成功
(win10 64位系统中)Visual Studio 2015+OpenCV 3.3.0环境搭建,100%成功 1.下载opencv 官网http://opencv.org/下载windows版Op ...
- [转]OPENCV3.3+CUDA9.0 环境搭建若干错误总结
编译OpenCV设计启用OpenGL三维可视化支持和启用GPU CUDA并行加速处理的基本知识: 1.从2.4.2版本开始,OpenCV在可视化窗口中支持OpenGL,这就意味着在OpenCV中可以轻 ...
- vs2012+qt5.2.0环境搭建/vs2013 + qt5.3.2 环境搭建
分类: Windows Qt2014-01-17 00:50 15434人阅读 评论(18) 收藏 举报 此文章已作废,请参考我的新文章: vs2013 + qt5.3.2 环境搭建 ( http:/ ...
- heritrix 3.2.0 -- 环境搭建
heritrix作为一个比较经典的开源爬虫,写这篇文章目的是因为,3.X之后的heritrix的介绍以及配置的文章比较少了. heritrix 3.x 以后使用maven 2配置jar包引用,但是总是 ...
- 云服务器下ASP.NET Core 1.0环境搭建(包含mono与coreclr)
最近.net core如火如荼,国内这方面环境搭建方面的文档也非常多,但是不少已经是过时的,就算按照那个流程走下去也避免不了一些地方早就不一样了.所以下面我将从头到尾的教大家搭建一次环境,并且成功运行 ...
- Qt4.8.6开发WinCE 5.0环境搭建
Qt-Wince5.0开发环境介绍 1.Windows7SP1 64 2.vs2008,以及sp1补丁 3.编译qt-everywhere-opensource-src-4.8.6.zip 4.qt- ...
随机推荐
- Linux下调试段错误 (gdb,core,ulimit)
Linux环境下经常遇到某个进程挂掉而找不到原因,我们可以通过生成core file文件加上gdb来定位. (1)首先 在makefile中要增加编译调试选项 -g,才可以利用下面的gdb来调试 gc ...
- Python之面向对象:方法
一.类的三种方法 1.实例方法 def func(self): 由对象调用:至少一个self参数:执行普通方法时,自动将调用该方法的对象赋值给self: 只能通过实例调用 2.静态方法 @stat ...
- iOS - 毛玻璃效果封装
#import <UIKit/UIKit.h> #import <Accelerate/Accelerate.h> @interface UIImage (TY_ImageEd ...
- 常用“Request.ServerVariables()”汇总
原文发布时间为:2009-10-25 -- 来源于本人的百度文章 [由搬家工具导入] Request.ServerVariables("REMOTE_ADDR") ...
- 页面get post等查看
原文发布时间为:2010-03-08 -- 来源于本人的百度文章 [由搬家工具导入] http://www.fiddler2.com/Fiddler2/firstrun.asp
- AtCoder Regular Contest 090 F - Number of Digits
题目链接 Description For a positive integer \(n\), let us define \(f(n)\) as the number of digits in bas ...
- linux库文件的制作
一.为什么要使用库文件 我们在实际编程工作中肯定会遇到这种情况:有几个项目里有一些函数模块的功能相同, 实现代码也相同,也是我们所说的重复代码.比如,很多项目里都有一个用户验证的功能. 代码段如下: ...
- C#TreeView读取Xml,TreeView导出到Xml
实现功能有1.根据Xml生成TreeView2.双击修改节点3.右键添加子节点或添加要节点4.右键删除当前选择的节点5.将修改后的TreeView重新生成Xml文档 其实这个主要是实现 了Xml生成T ...
- C# List排序,附加使用Linq排序
首先先介绍一下平时最常用的几种排序方法. 第一种:实体类实现IComparable接口,而且必须实现CompareTo方法 实体类定义如下: class Info:IComparable { publ ...
- H5页面唤起手机号
做手机H5页面的时候经常会碰到在某一个页面会显示一个手机号,坑爹的产品会说你点击一下能不能让手机弹出号码,然后拨打出去,我试了试各种百度来的方法都是失败的,比如下面的这个: <a href=&q ...