从零开始React项目架构(四)

前言


使用当前的webpack配置能不能打包构建项目呢?当然可以,但这不是我们想要的,所以,让我们来看一看生产环境需要怎么配置webpack吧

开发


  1. 生产环境配置
    在根目录创建webpack.pro.config.js
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')module.exports = {entry:{main:['babel-polyfill','./src/index.js'],        vendors: ['react','react-dom','react-router-dom','whatwg-fetch']},output:{path:path.resolve(__dirname,'dist'),filename:'bundle.[hash:4].js'},module:{rules:[{  test: /\.(woff|eot|ttf|svg|png|jpg)$/,  use: [  {  loader: 'url-loader',  options: {  limit: '1024' ,name: '[name].[hash:4].[ext]'  }                        },  ]  },{  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,use: [  {  loader: 'url-loader',  options: {  limit: '1024',name: '[name].[hash:4].[ext]'  }  },  ]  },{test: /\.(css|less)$/,use: ExtractTextPlugin.extract({fallback: 'style-loader',use: ["css-loader","less-loader"]})},{test:/\.(js|jsx)$/,use:"babel-loader",exclude:/node_modules/}]},devtool: false,plugins:[// html 模板插件new HtmlWebpackPlugin({template:'./src/index.html',favicon: './public/favicon.png'}),// 启用作用域提升,让代码文件更小、运行的更快new webpack.optimize.ModuleConcatenationPlugin(),// 提取公共代码vendorsnew webpack.optimize.CommonsChunkPlugin({name:'vendors',filename:'[name].[hash:4].js'}),// 抽离出cssnew ExtractTextPlugin("style.css"),// 压缩js代码new webpack.optimize.UglifyJsPlugin({compress: {warnings: false,drop_console: true,pure_funcs: ['console.log']}}),// 定义全局常量new webpack.DefinePlugin({"process.env": {"NODE_ENV": JSON.stringify("production")}}),// 加署名new webpack.BannerPlugin('Copyright by Zero https://github.com/l-Lemon/blog')]
}
复制代码

package.json的 script 中加入

"build": "webpack --config webpack.pro.config.js"
复制代码

运行 npm run build 根目录会生成 dist文件夹 和压缩后的代码。

  1. 抽离公共的webpack配置
    我们发现生产环境和开发环境中的webpack配置有很多相同的配置,为了维护性我们最好抽离出来。
    创建webapck.base.js文件来存我们公共配置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// 抽离css
const extractCss = new ExtractTextPlugin("style.css")
// html 模版
const htmlTemplate = new HtmlWebpackPlugin({template:'./src/index.html',favicon: './public/favicon.png'})
const config = {output:{path:path.resolve(__dirname,'dist'),filename:'bundle.[hash:4].js'},module:{rules:[{  test: /\.(woff|eot|ttf|svg|png|jpg)$/,  use: [  {  loader: 'url-loader',  options: {  limit: '1024' ,name: '[name].[hash:4].[ext]'  }                        },  ]  },{  test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,use: [  {  loader: 'url-loader',  options: {  limit: '1024',name: '[name].[hash:4].[ext]'  }  },  ]  },{test: /\.(css|less)$/,use: ExtractTextPlugin.extract({fallback: 'style-loader',use: ["css-loader","less-loader"]})},{test:/\.(js|jsx)$/,use:"babel-loader",exclude:/node_modules/}]},
}module.exports = {htmlTemplate,extractCss,config
}
复制代码
  1. 重构开发环境配置
    修改开发环境的webpack.config.js
const path = require('path')
const baseConfig = require('./webpack.base')module.exports = {entry:{main:['babel-polyfill','./src/index.js'],},...baseConfig.config,plugins:[baseConfig.htmlTemplate,baseConfig.extractCss],devServer:{contentBase: path.join(__dirname, "dist"),compress: true,port: 9000,proxy: {"/api": {target: "http://127.0.0.1:3000/",pathRewrite: {"^/api" : ""}}}}
}
复制代码
  1. 重构生产环境配置
    修改开发环境的webpack.pro.config.js
const webpack = require('webpack')
const baseConfig = require('./webpack.base')module.exports = {entry:{main:['babel-polyfill','./src/index.js'],// 将第三方库包单独打包,充分利用浏览器缓存        vendors: ['react','react-dom','react-router-dom','whatwg-fetch']},...baseConfig.config,devtool: false,plugins:[// html 模板插件baseConfig.htmlTemplate,// 启用作用域提升,让代码文件更小、运行的更快new webpack.optimize.ModuleConcatenationPlugin(),// 提取公共代码vendorsnew webpack.optimize.CommonsChunkPlugin({name:'vendors',filename:'[name].[hash:4].js'}),// 抽离出cssbaseConfig.extractCss,// 压缩js代码new webpack.optimize.UglifyJsPlugin({compress: {warnings: false,drop_console: true,pure_funcs: ['console.log']}}),// 定义全局常量new webpack.DefinePlugin({"process.env": {"NODE_ENV": JSON.stringify("production")}}),// 加署名new webpack.BannerPlugin('Copyright by Zero https://github.com/l-Lemon/blog')]
}
复制代码

好了,现在我们再来试试npm run devnpm run build命令,没问题都可以完美运行。

总结


这篇文章我们介绍了生产环境webpack的配置,并且抽出了公共配置,重构了开发环境和生产环境的配置。

下篇我们来介绍实现单元测试

系列文章


  1. 从零开始React项目架构(一)
  2. 从零开始React项目架构(二)
  3. 从零开始React项目架构(三)

源码


React项目架构

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/282993.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在OpenCloudOS 上安装.NET 6

开源操作系统社区 OpenCloudOS 由腾讯与合作伙伴共同倡议发起,是完全中立、全面开放、安全稳定、高性能的操作系统及生态。OpenCloudOS 沉淀了多家厂商在软件和开源生态的优势,继承了腾讯在操作系统和内核层面超过10年的技术积累,在云原生、稳…

Linux 命令详解(二)awk 命令

AWK是一种处理文本文件的语言,是一个强大的文本分析工具。之所以叫AWK是因为其取了三位创始人 Alfred Aho,Peter Weinberger, 和 Brian Kernighan 的Family Name的首字符。 语法: awk [选项参数] script varvalue file(s) 或 awk [选项参数] …

linux下vtune使用

安装:http://www.cnblogs.com/jiu0821/p/5943533.html 终端输入amplxe-gui,打开vtune界面。 点击new project,进入project properties界面。进行配置: target:target type选择launch application,application选择程序可…

java产生的数字发送到页面_JAVA中数字证书的维护及生成方法

Java中的keytool.exe可以用来创建数字证书,所有的数字证书是以一条一条(采用别名区别)的形式存入证书库的中,证书库中的一条证书包含该条证书的私钥,公钥和对应的数字证书的信息。证书库中的一条证书可以导出数字证书文件,数字证书…

数据库 创建 / 查看/ 删除

创建数据库 语法:CREATE DATABASE [IF NOT EXISTS] db_name; 重复创建会报错,所以可以加上if not exists 注意:SQL语句必须以分号结尾 查看有哪些数据库:SHOW DATABASES; 删除数据库 语法:DROP DATABASE [IF EXISTS] dbname;如果…

IDEA破解 2017 IDEA license server 激活(可用)

进入ide主页面,help-register-license server,然后输入 http://idea.iteblog.com/key.PHP(注意:php要小写)即可~ 转载于:https://www.cnblogs.com/austinspark-jessylu/p/7232982.html

《ASP.NET Core 6框架揭秘》实例演示[20]:“数据保护”框架基于文件的密钥存储...

《数据加解密与哈希》演示了“数据保护”框架如何用来对数据进行加解密,而“数据保护”框架的核心是“密钥管理”。数据保护框架以XML的形式来存储密钥,默认的IKeyManager实现类型为XmlKeyManager。接下来我们通过模拟代码和实例演示的形式来介绍一下Xml…

使用msui的回到顶部的一个小问题

2019独角兽企业重金招聘Python工程师标准>>> 回到顶部,一直没反应。 zepto加了动画后,依然如此。原生写法,jquery写法,仍然没有反应。 排查了后,发现获取的对象错误。手机端上,滚动到顶部&#…

口袋精灵加速版java_口袋妖怪TCG!口袋对决加速版教程(免ROOT)

原标题:口袋妖怪TCG!口袋对决加速版教程(免ROOT)《口袋对决》是一款以口袋精灵对战为核心玩法的集换式卡牌游戏,原汁原味的口袋画风,丰富多彩的各系精灵,策略竞技的属性相克。在5分钟一局的卡牌对战中,你将…

C#发布程序添加其他程序文件

注:程序发布文件,默认只发布自身程序直接引用的相关文件(A程序)。 如果需要添加其他程序(不同的应用程序B)文件,操作方法如下: 第一步:将B程序文件复制到A程序 第二步:将B程序文件右键--》属性做如下更改&a…

k8s 读书笔记 - 初始化容器 Init Container

Init Container 概述Init Container(Init 容器) 是一种特殊容器,在 Pod 内的应用容器启动之前运行,执行相关的初始化操作。Init 容器可以包括一些应用镜像中不存在的 实用工具 和 安装脚本 。每个 Pod 中可以包含一个或多个容器&a…

jsp 连接access数据库

参考笔记:https://www.cnblogs.com/mthoutai/p/7278995.html

关于 MySQL 的 boolean 和 tinyint(1)

boolean类型MYSQL保存BOOLEAN值时用1代表TRUE,0代表FALSE,boolean在MySQL里的类型为tinyint(1),MySQL里有四个常量:true,false,TRUE,FALSE,它们分别代表1,0,1,0,mysql> select true,false,TRUE,FALSE;--------------------------| TRUE | …

java jtable defaulttablemodel_java – JTable和DefaultTableModel

我有一个表从我的本地MySQL服务器获取信息.它很好地读取数据并将其发布在GUI上.我的问题是,当我更改table命令时,如何刷新表格,例如:private String sql "select * from profildb.tbl_detailed"; //toprivate String sql "select * from profildb.…

捕获 BackgroundService 中的异常 | 学学官方是如何实现的

前言上次,我们实现了《使用“装饰者模式”捕获 BackgroundService 中的异常》。结果发现,微软已经发现了这个问题,并在 .NET 6 中解决了。(囧)让我们验证一下:using IHost host Host.CreateDefaultBuilder…

使用badboy录制脚本 结合Jmeter一起测试。

1.badboy介绍 Badboy是一款不错的Web自动化测试工具,如果你将它用于非商业用途,或者用于商业用途安装Badboy 的机器数量不超过5台,你是不需要为它支付任何费用的。Badboy提供了将Web测试脚本直接导出生成JMeter 脚本的功能,并且这…

centOS下安装jdk1.8

2019独角兽企业重金招聘Python工程师标准>>> 本文记录了在vm下安装的centOS7下安装jdk1.8的过程 需要的工具及jdk: jdk-8u171-linux-x64.tar.gz 可以到官网去下 cecureFX 用于文件的传输 过程: 本次centOS7使用VMware Workstation 14 P…

php判断是否是文件_PHP判断文件是否为图片文件的方法总结

近日在做图片处理方面的开发,看着这一片不错的文章,分享给大家。在网页设计中,如果需要图片,我们通常拿到的是一个图片的文件名。仅仅通过文件名是无法判断该文件是否是一个图片文件的。或许有的人以为通过后缀名就可以判断&#…

盘点大厂的那些开源项目 - 滴滴出行

滴滴出行是涵盖出租车、 专车、滴滴快车、 顺风车、代驾及大巴、货运等多项业务在内的一站式出行平台。Nightingale 夜莺分类:监控系统夜莺是一套分布式高可用的运维监控系统,最大的特点是混合云支持,既可以支持传统物理机虚拟机的场景&#…

oracle 基本异常的练习及各个错误码

DECLAREv_deptno emp.deptno%TYPE :&deptno;v_sal emp.sal%TYPE;v_empno emp.empno%TYPE; BEGINSELECT sal INTO v_sal FROM emp WHERE deptno v_deptno;IF v_sal<1500 THEN UPDATE emp SET salsal100 WHERE empno v_empno; DBMS_OUTPUT.PUT_LINE(编码为||v_empno…