之前我有写过博文介绍过dva.js及其用法,dva.js固然是个非常优秀的框架,但是如果用dev-cli来创建的话就会默认绑定使用roadhog而不是webpack。鉴于roadhog的文档要明显少于webpack,如果能使用webpack+dvajs的话使用起来应该会轻松些。本文大致来介绍下dvajs+webpack3.11.0 开发环境的搭建过程。

首先先贴上package.json:

{
"name": "dva-webpack-boilerplate",
"version": "1.0.0",
"description": "Boilerplate for Dvajs + React + Webpack project with JSX, ES6 and decorator compilation",
"scripts": {
"start": "webpack-dev-server --hot --open --port 11111 --config config/webpack.dev.config.js",
"build": "webpack --config config/webpack.prod.config.js"
},
"keywords": [
"react",
"reactjs",
"boilerplate"
],
"license": "MIT",
"devDependencies": {
"babel-core": "^6.9.1",
"babel-loader": "^7.1.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-1": "^6.5.0",
"copy-webpack-plugin": "^4.5.1",
"css-loader": "^0.28.11",
"extract-text-webpack-plugin": "^3.0.2",
"html-webpack-plugin": "^3.2.0",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"style-loader": "^0.21.0",
"uglifyjs-webpack-plugin": "^1.2.5",
"url-loader": "^1.0.1",
"webpack": "^3.11.0",
"webpack-dev-server": "^2.11.2",
"webpack-merge": "^4.1.2"
},
"dependencies": {
"dva": "^2.2.3",
"react": "^16.3.2",
"react-dom": "^16.3.2"
}
}

然后是.babelrc

{
"presets": [
"react",
"es2015",
"stage-1"
],
"plugins": ["transform-decorators-legacy" ,"transform-runtime"]
}

项目根目录存放好这两个文件,再运行cnpm i ,环境搭建就算是完成了一半。

接下来是webpack的配置。为了区分开发环境与生产环境,将webpack.config.js分成了三个文件:webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js

webpack.base.config.js

var path = require('path');
var webpack = require('webpack'); module.exports = {
devtool: '#source-map',
entry: [
'./src/index'
],
output: {
path: path.join(__dirname, 'dist'),
filename: 'build.js',
publicPath: '/dist/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(), ],
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
use: ['babel-loader'],
include: path.join(process.cwd(), 'src')
}, {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
}
}
]
}
};

webpack.dev.config.js

const baseWebpackConfig = require('./webpack.base.config');
const merge = require('webpack-merge'); module.exports = merge(baseWebpackConfig, {
// mode:"development"
module: {
rules: [
{
test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']
}]
}
});

webpack.prod.config.js

const path = require('path');
const webpack = require('webpack');
const baseWebpackConfig = require('./webpack.base.config');
const merge = require('webpack-merge');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin'); module.exports = merge(baseWebpackConfig, {
output: {
path: path.join(process.cwd(), 'dist'),
filename: 'build.js',
},
// mode: "production",
module:{
rules: [
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader', 'sass-loader']
})
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
}),
new ExtractTextPlugin({
filename: 'style.css'
}),
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
parallel: true
}),
new HtmlWebpackPlugin({
filename: path.join(process.cwd(), 'dist/index.html'),
template: 'index-build.html',
inject: false,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),
new webpack.HashedModuleIdsPlugin(),
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: 'static',
ignore: ['.*']
}
]),
]
});

最终目录结构:

config存放三个webpack配置文件,dist存放生成出来的成品,static存放图片等静态资源。

index.html用于开发环境,index-build.html用于生产环境,方便配置cdn。

到此环境搭建完毕。

本项目github:

https://github.com/axel10/dva-webpack-boilerplate

使用dvajs+webpack构建react开发环境的更多相关文章

  1. 使用create-react-app 快速构建 React 开发环境以及react-router 4.x路由配置

    create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...

  2. react学习笔记(一)用create-react-app构建 React 开发环境

    React 可以高效.灵活的用来构建用户界面框架,react利用高效的算法最小化重绘DOM. create-react-app 是来自于 Facebook,通过该命令不需配置就能快速构建 React ...

  3. 【React】使用 create-react-app 快速构建 React 开发环境

    create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. create-react-app 自动创建的项目是基于 Webpack + E ...

  4. 搭建 webpack、react 开发环境(三)

    配置 react-router-dom   我们开发一个 React 工程肯定不是一两个“页面”就可以满足需求的,所以我们需要一个在多个“页面”中跳转的功能,在使用 React 构建的单页面应用中,要 ...

  5. 搭建 webpack、react 开发环境(一)

    基本介绍   Webpack 是一个前端资源加载/打包工具.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源,它可以将多种静态资源 JavaScript.css.le ...

  6. 快速构建 React 开发环境

    使用 create-react-app 快速构建 React 开发环境 create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境. cre ...

  7. 搭建 webpack、react 开发环境(二)

    配置处理样式文件   到目前为止,整个工程的配置已经差不多了,对于 React 更多相关的配置将在后面继续介绍,现在我们先来对目前的工程进行优化. 前面我们学习了搭建 webpack.react 开发 ...

  8. 详解 Webpack+Babel+React 开发环境的搭建

    1.认识Webpack 构建应用前我们先来了解一下Webpack, Webpack是一个模块打包工具,能够把各种文件(例如:ReactJS.Babel.Coffeescript.Less/Sass等) ...

  9. 使用webpack搭建react开发环境

    安装和使用webpack 1.初始化项目 mkdir react-redux && cd react-redux npm init -y 2.安装webpack npm i webpa ...

随机推荐

  1. CCPC 2016-2017, Finals

    A. HDU 5999 The Third Cup is Free 简单模拟. B. HDU 6000 Wash n 件衣服, m 个洗衣机,k 个烘干机.每个洗衣机和烘干机需要不同的时间.问 n 件 ...

  2. 栈经典列题:Rails

    解题心得: 1.这题是先进后出的顺序,所以使用栈(先进后出表). 2.搞清楚题意,需要达成的序列和进入的序.不要弄混了. 3.思维混乱的时候要冷静,冷静,冷静~~~~! 题目: Description ...

  3. mysql-不恰当的update语句使用主键和索引导致mysql死锁

    背景知识:MySQL有三种锁的级别:页级.表级.行级. MyISAM和MEMORY存储引擎采用的是表级锁(table-level locking):BDB存储引擎采用的是页面锁(page-level ...

  4. angular用$sce服务来过滤HTML标签

    angular js的强大之处之一就是他的数据双向绑定这一牛B功能,我们会常常用到的两个东西就是ng-bind和针对form的ng-model.但在我们的项目当中会遇到这样的情况,后台返回的数据中带有 ...

  5. java多线程安全的问题

    多线程中一定会遇到线程安全的问题,也就是在同一时间N条线程操作了同一变量,这个变量也叫做共享变量. 举例:(错误的示范) 设计一个投票系统,多个人可以对同一个的票数进行投票,下面看具体代码: 代码: ...

  6. 我给女朋讲编程网络系列(2)--IIS8 如何在本地发布网站

    通过IIS8 在本地发布网站,一个截图,你就全明白了,越是简单,越是实用. 如果有现成的网站,就将你的网站放到一个文件夹中,比如WebTest2中. 如何没有网站,可以在WebTest2中新建一个in ...

  7. rn-fetch-blob+redux 取消请求

    其实取消请求对于普通的ajax请求rn-fetch-blob写法是比较简单的 let task = RNFetchBlob.fetch('GET', 'http://example.com/file/ ...

  8. CF 964C Alternating Sum

    给定两正整数 $a, b$ .给定序列 $s_0, s_1, \dots, s_n,s_i$ 等于 $1$ 或 $-1$,并且已知 $s$ 是周期为 $k$ 的序列并且 $k\mid (n+1)$,输 ...

  9. [usaco jan 09] 气象牛 baric [dp]

    题面: 传送门 思路: 题意有点绕,实际上就是给你一个计算规则,让你取最少的元素,通过这个计算方式,得到一个小于指定误差上限的结果 这个规则分为三个部分,这里分别用pre,sum,suf表示 因为给定 ...

  10. css中按钮的四种状态

    css中按钮有四种状态 1. 普通状态2. hover 鼠标悬停状态3. active 点击状态4. focus 取得焦点状态 .btn:focus{outline:0;} 可以去除按钮或a标签点击后 ...