文档章节

react+webpack构建步骤

阿祥_开源中国
 阿祥_开源中国
发布于 2016/10/12 15:48
字数 342
阅读 56
收藏 3

一、安装全局组件

    用于转译 es6、react 到 es5,打包工程,启动 webpack-dev-server 服务

    npm install babel-core babel-loader babel-preset-es2015 babel-preset-react webpack-dev-server -g

 

二、安装构建所需组件

    用于处理 css 

    npm install css-loader file-loader style-loader webpack --save-dev

 

三、安装项目依赖组件

    打包时会包含到打包文件中

    npm install react react-css-modules react-dom react-router --save

 

package.json demo:

{
  "name": "testReact",
  "version": "0.0.1",
  "description": "test react",
  "main": "app.js",
  "dependencies": {
    "react": "^15.3.2",
    "react-css-modules": "^3.7.10",
    "react-dom": "^15.3.2",
    "react-router": "^2.8.1"
  },
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "clean-webpack-plugin": "^0.1.13",
    "copy-webpack-plugin": "^3.0.1",
    "css-loader": "^0.25.0",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.22.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2"
  },
  "scripts": {
    "build": "webpack --config webpack.config.js",
    "dev": "webpack-dev-server --inline --hot --content-base ./"
  },
  "author": "wangxiang",
  "license": ""
}

webpack.config.js demo:

var path = require('path');
var node_modules_dir = path.resolve(__dirname, 'node_modules');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var Webpack = require('webpack');

module.exports = {
	entry: './app/js/page/app.jsx',
	output: {
		path: './web',
		filename: 'app.js',
	},
	resolve: {
		extensions: ['', '.js', '.jsx']
	},
	plugins: [
		new CleanWebpackPlugin(['web'], {
			root: '',
			verbose: true,
			dry: false,
			exclude: []
		}),
		new Webpack.DefinePlugin({
			"process.env": {
				NODE_ENV: JSON.stringify("production")
			}
		}),
		new CopyWebpackPlugin([{
			from: 'app/image',
			to: './image'
		}, {
			from: 'app/css',
			to: './css'
		}]),
		new ExtractTextPlugin("./styles.css"),
		new Webpack.optimize.UglifyJsPlugin({
			output: {
				comments: false,
			},
			compress: {
				warnings: false
			}
		}),
		new HtmlWebpackPlugin({
			template: './template.html',
			filename: './index.html',
			minify: {
				removeComments: true,
				collapseWhitespace: true
			}
		})
	],
	module: {
		loaders: [{
			test: /\.jsx?$/,
			query: {
				presets: ['es2015', 'react'],
				compact: false
			},
			loader: 'babel'
		}, {
			test: /\.css$/,
			loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules')
		}, {
			test: /\.(png|jpg)$/,
			loader: 'file?name=[path][name]_[sha512:hash:base64:7].[ext]'
		}]
	}
};

注意事项:

    虽然使用了 babel,但是并不代表会把所有的 es6 语法转换成 es5,在使用 es6 新的 api 之前需查询 api 是否已经转换,若没有转换,则需查询该 api 的兼容性,以免出错。如:Array.from、Object.assign。

© 著作权归作者所有

阿祥_开源中国
粉丝 17
博文 24
码字总数 9890
作品 0
朝阳
程序员
私信 提问
React+Webpack性能优化

本文主要讲下React配合Webpack的一些优化,原项目在这里,有空会持续更新,欢迎关注和start,另外还有个无法使用HtmlWebpackPlugin插入chunks的issues请求哪位大佬帮忙解决下,谢谢~ 构建优化...

后排的过儿
2018/09/04
0
0
Webpack+React项目入门——入门及配置Webpack

一、入门Webpack 参考文章:《入门Webpack,看这篇就够了》 耐心看完这篇非常有帮助 二、React+Webpack环境配置 参考文章:《webpack+react项目初体验》 项目实战:《webpack+react小项目》 三、...

xiaobiB
2018/08/09
0
0
使用Electron构建React+Webpack桌面应用

前言 Electron可以使用HTML、CSS、JavaScript构建跨平台桌面应用,可是在使用到React和Webpack时,会遇到一些配置问题,本文将针对React+Webpack下的Electron配置提供一个通用的解决方案。 ...

VoyagerOne
2017/12/15
0
0
react+webapck多页面(multipage)程序

reactjs是facebook开源的新一代前端框架,基于组件式的编程,使得前端开发也能像传统客户端开发一样灵活 但是,为了兼顾已有的网站项目,需要把reactjs的页面与其他项目融合,就需要对页面进...

u012234115
2017/11/26
0
0
react+webpack开发环境搭建

###Webpack配置 目录结构 --your project |--app |--components |--productBox.jsx |--main.js |--build |--index.html |--bundle.js(该文件是webpack打包后生成的) 初始化,会直接创建packa......

会炒饭的美工
2016/09/05
179
0

没有更多内容

加载失败,请刷新页面

加载更多

Java 8 Optional:优雅地避免 NPE

本篇文章将详细介绍 Optional 类,以及如何用它消除代码中的 null 检查。在开始之前首先来看下什么是 NPE,以及在 Java 8 之前是如何处理 NPE 问题的。 空指针异常(NullPointException,简称...

武培轩
7分钟前
0
0
CountDownLatch实现的并发框架

目录结构 package com.**.**.base.support.executor;import lombok.NoArgsConstructor;import org.apache.commons.logging.Log;import org.apache.commons.logging.LogFactory;imp......

MR_TE
9分钟前
0
0
学习记录(day06-事件、按键修饰符、计算属性)

[TOC] 1.1 事件修饰符/按键修饰符 vue 通过事件修饰符对dom事件细节进行控制 <标签 @事件.修饰符="函数"></标签>.prevent ---阻止浏览器默认行为.stop ---阻止浏览器事件冒泡.e...

庭前云落
28分钟前
0
0
006-Sigle-基于blockstack去中心化博客

本篇文章主要讲解有关基于Blockstack的Sigle是一个去中心化的博客项目; 官网地址:https://www.sigle.io/ Github地址:https://github.com/pradel/sigle 页面展示: 介绍: A beautiful de...

Riverzhou
35分钟前
11
0
驰骋工作流引擎开发平台属性功能的隐藏显示介绍

关键字: 工作流程管理系统 工作流引擎 asp.net工作流引擎 java工作流引擎. 表单引擎 工作流功能说明 工作流设计 工作流快速开发平台 业务流程管理 bpm工作流系统 java工作流主流框架 自定义...

孟娟
37分钟前
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部